← Back to Editor

#CFD9A0 · #7DAD8B · #243E40 · #010D0F · #473852

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CFD9A0

Willow Green · Khaki · Apple Green

HEX
#CFD9A0
RGB
rgb(207, 217, 160)
HSL
hsl(71, 43%, 74%)
HSB
hsb(71, 26%, 85%)
CMYK
cmyk(5%, 0%, 26%, 15%)
Oklch
oklch(86.4% 0.076 116.1)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#7DAD8B

Celadon · DarkSeaGreen · Olive Green

HEX
#7DAD8B
RGB
rgb(125, 173, 139)
HSL
hsl(138, 23%, 58%)
HSB
hsb(138, 28%, 68%)
CMYK
cmyk(28%, 0%, 20%, 32%)
Oklch
oklch(70.4% 0.071 153.4)

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

#243E40

Slate Blue · DarkSlateGray · Peacock Green

HEX
#243E40
RGB
rgb(36, 62, 64)
HSL
hsl(184, 28%, 20%)
HSB
hsb(184, 44%, 25%)
CMYK
cmyk(44%, 3%, 0%, 75%)
Oklch
oklch(34.4% 0.032 202.0)

Traditional「Slate Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#010D0F

Lake Blue · Black · Peacock Green

HEX
#010D0F
RGB
rgb(1, 13, 15)
HSL
hsl(189, 88%, 3%)
HSB
hsb(189, 93%, 6%)
CMYK
cmyk(93%, 13%, 0%, 94%)
Oklch
oklch(14.6% 0.022 206.1)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#473852

Dark Plum · DarkSlateGray · Eggplant

HEX
#473852
RGB
rgb(71, 56, 82)
HSL
hsl(275, 19%, 27%)
HSB
hsb(275, 32%, 32%)
CMYK
cmyk(13%, 32%, 0%, 68%)
Oklch
oklch(36.8% 0.048 310.4)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFD9A0
ABA0D9

Analogous

D9C7A0
CFD9A0
B2D9A0

Triadic

CFD9A0
A0CFD9
D9A0CF

Split-Comp.

CFD9A0
A0B2D9
C7A0D9

Tetradic

CFD9A0
A0D9C7
ABA0D9
D9A0B2

Contrast Matrix WCAG 2.1 Contrast

CFD9A0
7DAD8B
243E40
010D0F
473852
—
1.7
Fail
7.7
AAA
13.2
AAA
7.2
AAA
1.7
Fail
—
4.5
AA Large
7.7
AAA
4.2
AA Large
7.7
AAA
4.5
AA Large
—
1.7
Fail
1.1
Fail
13.2
AAA
7.7
AAA
1.7
Fail
—
1.8
Fail
7.2
AAA
4.2
AA Large
1.1
Fail
1.8
Fail
—
White BG
1.5Fail
2.6Fail
11.4AAA
19.7AAA
10.7AAA
Black BG
14.1AAA
8.2AAA
1.8Fail
1.1Fail
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3AE
929293
2F2F40
06060F
41404C

Deuteranopia

D3D2B1
8F8B95
2E2C3F
06050E
41434A

Tritanopia

CFB9BB
7F9A9B
253F3F
020E0E
464746

Achromatopsia

D0D0D0
9B9B9B
363636
0A0A0A
3F3F3F

Shades & Tints Shades & Tints

#CFD9A0

Dark
Light

#7DAD8B

Dark
Light

#243E40

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfd9a0;
  --color-2: #7dad8b;
  --color-3: #243e40;
  --color-4: #010d0f;
  --color-5: #473852;
}

SCSS

$color-1: #cfd9a0;
$color-2: #7dad8b;
$color-3: #243e40;
$color-4: #010d0f;
$color-5: #473852;

TAILWIND

colors: {
  'brand-1': '#cfd9a0',
  'brand-2': '#7dad8b',
  'brand-3': '#243e40',
  'brand-4': '#010d0f',
  'brand-5': '#473852',
}

RGB Array

[207, 217, 160], [125, 173, 139], [36, 62, 64], [1, 13, 15], [71, 56, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFD9A0, #7DAD8B, #243E40, #010D0F, #473852 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cfd9a0; --color-2: #7dad8b; --color-3: #243e40; --color-4: #010d0f; --color-5: #473852. 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 tech, SaaS, healthcare, eco industries. 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