LINE color palette
SocialLINE's color identity is defined by its signature bright green, supported by a clean, minimal palette of white, dark gray, and subtle accent colors. The palette emphasizes clarity, approachability, and instant recognition across digital and print applications.
line.meLINE colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- LINE GreenPrimary0, 195, 0
- LINE WhiteSecondary255, 255, 255
- LINE Accent GreenAccent6, 199, 85
Surfaces
Page, cards and dividers.- LINE Light GrayBackground245, 246, 247
- LINE Surface WhiteSurface255, 255, 255
- LINE Border GrayBorder224, 224, 224
Text
Three tiers of copy.- LINE CharcoalText34, 34, 34
- LINE Medium GraySecondary text102, 102, 102
- LINE Muted GrayMuted text175, 175, 175
Semantic
Feedback and state colors.- LINE Success GreenSuccess0, 185, 0
- LINE Warning YellowWarning255, 187, 0
- LINE Error RedError255, 59, 48
- LINE Info BlueInfo55, 151, 255
Use LINE's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
line-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3797FF;
--error: #FF3B30;
--accent: #06C755;
--border: #E0E0E0;
--primary: #00C300;
--success: #00B900;
--surface: #FFFFFF;
--warning: #FFBB00;
--secondary: #FFFFFF;
--text-muted: #AFAFAF;
--background: #F5F6F7;
--text-primary: #222222;
--text-secondary: #666666;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
14.7:1
Pass
Text on surface
Needs 4.5:1 for body text
15.9:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.3:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.7:1
Pass
Muted text on background
Needs 3:1 for large text
2.0:1
Fail
Muted text on surface
Needs 3:1 for large text
2.2:1
Fail
LINE gray and neutral colors
The quiet part of the LINE palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- LINE Light GrayBackground
- HEX
- RGB
- HSL
- LINE Surface WhiteSurface
- HEX
- RGB
- HSL
- LINE Border GrayBorder
- HEX
- RGB
- HSL
- LINE CharcoalText
- HEX
- RGB
- HSL
- LINE Medium GraySecondary text
- HEX
- RGB
- HSL
- LINE Muted GrayMuted text
- HEX
- RGB
- HSL
About LINE's colors
LINE's palette is anchored by a vivid green, conveying freshness and approachability, balanced with neutral whites and grays for clarity. The supporting colors are used sparingly to maintain focus on content and usability.
Primary green contrasts with white for high visibility.
Grays provide hierarchy and separation in UI.
Accent green and semantic colors highlight interactive elements.
Psychology
The signature green evokes friendliness, growth, and trust, aligning with LINE's communication mission. Neutral tones support a clean, modern interface that feels open and easy to use.
Evolution
LINE's color palette has remained consistent since its launch, with only minor adjustments to green shades for digital clarity. The neutral and semantic colors have been refined to improve accessibility and visual hierarchy.
Where LINE uses each color
- Primary
LINE Green is used for the app icon, primary buttons, and key branding elements.
- Secondary
LINE White serves as the main background for chat screens and interface panels.
- Accent
Accent Green highlights active states, secondary buttons, and promotional banners.
- Backgrounds
LINE Light Gray is used for app backgrounds and message bubbles.
- Text
Charcoal and Medium Gray are used for primary and secondary text in chat and navigation.
- Semantic
Success, warning, error, and info colors are used for system messages, badges, and alerts.
LINE color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official LINE primary color is #00C300, known as LINE Green. This color is used for branding and key UI elements.
The RGB value for LINE Green (#00C300) is 0, 195, 0. For CMYK, it is approximately 100, 0, 100, 0.
LINE uses several neutral tones, including LINE Light Gray (#F5F6F7), Border Gray (#E0E0E0), and Charcoal (#222222) for text and backgrounds. These support readability and a clean interface.
The palette should prioritize LINE Green for branding and calls to action, with neutrals for backgrounds and text. Accent and semantic colors are reserved for highlights, notifications, and system feedback.
The secondary color is LINE White, #FFFFFF, and the accent is LINE Accent Green, #06C755. Together with the primary they make up the three brand colors at the top of this page.
4 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies LINE's colors consistently when it generates UI.
Make something in the spirit of LINE
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.