← Back to Editor

#CFD9EE · #99AF30 · #A34500 · #62002F · #250311

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

#CFD9EE

Azure · LightGray · Sky Blue

HEX
#CFD9EE
RGB
rgb(207, 217, 238)
HSL
hsl(221, 48%, 87%)
HSB
hsb(221, 13%, 93%)
CMYK
cmyk(13%, 9%, 0%, 7%)
Oklch
oklch(88.4% 0.031 265.3)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#99AF30

Grass Green · DarkGoldenRod · Olive Green

HEX
#99AF30
RGB
rgb(153, 175, 48)
HSL
hsl(70, 57%, 44%)
HSB
hsb(70, 73%, 69%)
CMYK
cmyk(13%, 0%, 73%, 31%)
Oklch
oklch(71.4% 0.150 119.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#A34500

Tangerine · Sienna · Amber Brown

HEX
#A34500
RGB
rgb(163, 69, 0)
HSL
hsl(25, 100%, 32%)
HSB
hsb(25, 100%, 64%)
CMYK
cmyk(0%, 58%, 100%, 36%)
Oklch
oklch(50.7% 0.141 46.9)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#62002F

Dark Violet · Maroon · Raspberry

HEX
#62002F
RGB
rgb(98, 0, 47)
HSL
hsl(331, 100%, 19%)
HSB
hsb(331, 100%, 38%)
CMYK
cmyk(0%, 100%, 52%, 62%)
Oklch
oklch(32.1% 0.130 1.1)

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

#250311

Dark Violet · Black · Raspberry

HEX
#250311
RGB
rgb(37, 3, 17)
HSL
hsl(335, 85%, 8%)
HSB
hsb(335, 92%, 15%)
CMYK
cmyk(0%, 92%, 54%, 85%)
Oklch
oklch(17.9% 0.062 358.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFD9EE
EEE4CE

Analogous

CEE8EE
CFD9EE
D4CEEE

Triadic

CFD9EE
EECED8
D8EECE

Split-Comp.

CFD9EE
EED4CE
E8EECE

Tetradic

CFD9EE
EECEE8
EEE4CE
CEEED4

Contrast Matrix WCAG 2.1 Contrast

CFD9EE
99AF30
A34500
62002F
250311
—
1.7
Fail
4.3
AA Large
9.5
AAA
13.5
AAA
1.7
Fail
—
2.5
Fail
5.5
AA
7.8
AAA
4.3
AA Large
2.5
Fail
—
2.2
Fail
3.1
AA Large
9.5
AAA
5.5
AA
2.2
Fail
—
1.4
Fail
13.5
AAA
7.8
AAA
3.1
AA Large
1.4
Fail
—
White BG
1.4Fail
2.5Fail
6.2AA
13.5AAA
19.1AAA
Black BG
14.8AAA
8.5AAA
3.4AA Large
1.6Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3E9
A3A34F
7A7911
383724
16160E

Deuteranopia

D3D2E8
A1A056
808715
3D4521
181B0D

Tritanopia

CFE5E4
9A676C
9E1E21
5D1B19
230B0A

Achromatopsia

D8D8D8
9A9A9A
595959
232323
0F0F0F

Shades & Tints Shades & Tints

#CFD9EE

Dark
Light

#99AF30

Dark
Light

#A34500

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfd9ee;
  --color-2: #99af30;
  --color-3: #a34500;
  --color-4: #62002f;
  --color-5: #250311;
}

SCSS

$color-1: #cfd9ee;
$color-2: #99af30;
$color-3: #a34500;
$color-4: #62002f;
$color-5: #250311;

TAILWIND

colors: {
  'brand-1': '#cfd9ee',
  'brand-2': '#99af30',
  'brand-3': '#a34500',
  'brand-4': '#62002f',
  'brand-5': '#250311',
}

RGB Array

[207, 217, 238], [153, 175, 48], [163, 69, 0], [98, 0, 47], [37, 3, 17]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFD9EE, #99AF30, #A34500, #62002F, #250311 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #cfd9ee; --color-2: #99af30; --color-3: #a34500; --color-4: #62002f; --color-5: #250311. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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