KakaoTalk color palette
SocialKakaoTalk's color identity is defined by its signature bright yellow and deep brown, creating a distinctive and approachable look. The palette is stable and widely recognized across its digital and physical touchpoints.
kakaocorp.comKakaoTalk colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- KakaoTalk YellowPrimary255, 205, 0
- KakaoTalk BrownSecondary60, 30, 30
- KakaoTalk Accent YellowAccent250, 225, 0
Surfaces
Page, cards and dividers.- KakaoTalk WhiteBackground255, 255, 255
- KakaoTalk Light GraySurface246, 246, 246
- KakaoTalk Border GrayBorder225, 225, 225
Text
Three tiers of copy.- KakaoTalk BlackText25, 25, 25
- KakaoTalk Dark GraySecondary text102, 102, 102
- KakaoTalk Muted GrayMuted text166, 166, 166
Semantic
Feedback and state colors.- KakaoTalk GreenSuccess77, 190, 77
- KakaoTalk OrangeWarning255, 138, 61
- KakaoTalk RedError243, 66, 66
- KakaoTalk BlueInfo0, 145, 255
Use KakaoTalk's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
kakaotalk-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #0091FF;
--error: #F34242;
--accent: #FAE100;
--border: #E1E1E1;
--primary: #FFCD00;
--success: #4DBE4D;
--surface: #F6F6F6;
--warning: #FF8A3D;
--secondary: #3C1E1E;
--text-muted: #A6A6A6;
--background: #FFFFFF;
--text-primary: #191919;
--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
17.6:1
Pass
Text on surface
Needs 4.5:1 for body text
16.3:1
Pass
Secondary text on background
Needs 4.5:1 for body text
5.7:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
5.3:1
Pass
Muted text on background
Needs 3:1 for large text
2.4:1
Fail
Muted text on surface
Needs 3:1 for large text
2.3:1
Fail
KakaoTalk gray and neutral colors
The quiet part of the KakaoTalk palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- KakaoTalk WhiteBackground
- HEX
- RGB
- HSL
- KakaoTalk Light GraySurface
- HEX
- RGB
- HSL
- KakaoTalk Border GrayBorder
- HEX
- RGB
- HSL
- KakaoTalk BlackText
- HEX
- RGB
- HSL
- KakaoTalk Dark GraySecondary text
- HEX
- RGB
- HSL
- KakaoTalk Muted GrayMuted text
- HEX
- RGB
- HSL
About KakaoTalk's colors
KakaoTalk's palette is anchored by a vibrant yellow and deep brown, ensuring instant recognition and warmth. The supporting neutrals and semantic colors provide clarity and accessibility across interfaces.
Primary yellow contrasts with deep brown for legibility.
Neutral grays support content hierarchy.
Accent yellow is used for highlights and active states.
Psychology
The bright yellow evokes friendliness and approachability, while the brown adds trust and stability. Together, they create a welcoming and reliable brand impression.
Evolution
KakaoTalk's core yellow and brown combination has remained consistent since launch, reinforcing brand recognition. Minor adjustments to supporting grays and semantic colors have improved UI clarity over time.
Where KakaoTalk uses each color
- Primary
KakaoTalk Yellow is used for the app icon, splash screens, and key CTAs.
- Secondary
KakaoTalk Brown appears in the logo wordmark and navigation bars.
- Accent
Accent Yellow highlights active chat bubbles and notification badges.
- Backgrounds
White and light gray backgrounds are used for chat screens and menus.
- Text
Black and dark gray are used for primary and secondary text throughout the app.
- Semantic
Green, orange, red, and blue are used for status indicators, alerts, and informational messages.
KakaoTalk color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official KakaoTalk primary color is #FFCD00, known as KakaoTalk Yellow. It is used for the app icon and main branding elements.
KakaoTalk Yellow (#FFCD00) in RGB is (255, 205, 0). In CMYK, it is approximately (0, 0.196, 1, 0).
KakaoTalk uses #F6F6F6 (Light Gray), #E1E1E1 (Border Gray), #666666 (Dark Gray), and #A6A6A6 (Muted Gray) for UI backgrounds and text. These ensure readability and a clean interface.
Use #FFCD00 for primary branding and CTAs, #3C1E1E for navigation and logo, and neutrals for backgrounds and text. Semantic colors like #4DBE4D (Green) and #F34242 (Red) are reserved for status and alerts.
The secondary color is KakaoTalk Brown, #3C1E1E, and the accent is KakaoTalk Accent Yellow, #FAE100. 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 KakaoTalk's colors consistently when it generates UI.
Make something in the spirit of KakaoTalk
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.