← Back to Editor

#C8CE13 · #F8F5C1 · #349E97 · #2C0D1A · #DE1A72

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#C8CE13

Autumn Sage · GoldenRod · Honey Gold

HEX
#C8CE13
RGB
rgb(200, 206, 19)
HSL
hsl(62, 83%, 44%)
HSB
hsb(62, 91%, 81%)
CMYK
cmyk(3%, 0%, 91%, 19%)
Oklch
oklch(81.9% 0.178 111.9)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#F8F5C1

Fresh Green · Bisque · Lemon Cream

HEX
#F8F5C1
RGB
rgb(248, 245, 193)
HSL
hsl(57, 80%, 86%)
HSB
hsb(57, 22%, 97%)
CMYK
cmyk(0%, 1%, 22%, 3%)
Oklch
oklch(96.0% 0.067 104.8)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#349E97

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#349E97
RGB
rgb(52, 158, 151)
HSL
hsl(176, 50%, 41%)
HSB
hsb(176, 67%, 62%)
CMYK
cmyk(67%, 0%, 4%, 38%)
Oklch
oklch(63.8% 0.095 188.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#2C0D1A

Dark Violet · Black · Raspberry

HEX
#2C0D1A
RGB
rgb(44, 13, 26)
HSL
hsl(335, 54%, 11%)
HSB
hsb(335, 70%, 17%)
CMYK
cmyk(0%, 70%, 41%, 83%)
Oklch
oklch(21.5% 0.054 356.4)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#DE1A72

Dark Violet · MediumVioletRed · Camellia

HEX
#DE1A72
RGB
rgb(222, 26, 114)
HSL
hsl(333, 79%, 49%)
HSB
hsb(333, 88%, 87%)
CMYK
cmyk(0%, 88%, 49%, 13%)
Oklch
oklch(58.9% 0.227 2.2)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8CE13
1913CD

Analogous

CD7613
C8CE13
6ACD13

Triadic

C8CE13
13C7CD
CD13C7

Split-Comp.

C8CE13
136ACD
7613CD

Tetradic

C8CE13
13CD76
1913CD
CD136A

Contrast Matrix WCAG 2.1 Contrast

C8CE13
F8F5C1
349E97
2C0D1A
DE1A72
—
1.5
Fail
1.9
Fail
10.4
AAA
2.7
Fail
1.5
Fail
—
2.9
Fail
16.0
AAA
4.2
AA Large
1.9
Fail
2.9
Fail
—
5.5
AA
1.4
Fail
10.4
AAA
16.0
AAA
5.5
AA
—
3.8
AA Large
2.7
Fail
4.2
AA Large
1.4
Fail
3.8
AA Large
—
White BG
1.7Fail
1.1Fail
3.2AA Large
17.8AAA
4.7AA
Black BG
12.3AAA
18.8AAA
6.5AA
1.2Fail
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCB40
F7F7CE
626399
1F1E17
89875D

Deuteranopia

CACA4B
F7F7D1
5C5499
202316
95A358

Tritanopia

C8646C
F8D8DA
399A9A
2A1414
D44C48

Achromatopsia

B7B7B7
F0F0F0
7E7E7E
181818
5F5F5F

Shades & Tints Shades & Tints

#C8CE13

Dark
Light

#F8F5C1

Dark
Light

#349E97

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8ce13;
  --color-2: #f8f5c1;
  --color-3: #349e97;
  --color-4: #2c0d1a;
  --color-5: #de1a72;
}

SCSS

$color-1: #c8ce13;
$color-2: #f8f5c1;
$color-3: #349e97;
$color-4: #2c0d1a;
$color-5: #de1a72;

TAILWIND

colors: {
  'brand-1': '#c8ce13',
  'brand-2': '#f8f5c1',
  'brand-3': '#349e97',
  'brand-4': '#2c0d1a',
  'brand-5': '#de1a72',
}

RGB Array

[200, 206, 19], [248, 245, 193], [52, 158, 151], [44, 13, 26], [222, 26, 114]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8CE13, #F8F5C1, #349E97, #2C0D1A, #DE1A72 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c8ce13; --color-2: #f8f5c1; --color-3: #349e97; --color-4: #2c0d1a; --color-5: #de1a72. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color