← Back to Editor

#CADC99 · #C1516C · #684E7C · #446E7C · #2D2D2D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CADC99

Willow Green · Khaki · Apple Green

HEX
#CADC99
RGB
rgb(202, 220, 153)
HSL
hsl(76, 49%, 73%)
HSB
hsb(76, 30%, 86%)
CMYK
cmyk(8%, 0%, 30%, 14%)
Oklch
oklch(86.5% 0.090 120.5)

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

#C1516C

Crimson · MediumVioletRed · Passion Red

HEX
#C1516C
RGB
rgb(193, 81, 108)
HSL
hsl(346, 47%, 54%)
HSB
hsb(346, 58%, 76%)
CMYK
cmyk(0%, 58%, 44%, 24%)
Oklch
oklch(58.6% 0.145 7.7)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#684E7C

Dark Plum · DimGray · Eggplant

HEX
#684E7C
RGB
rgb(104, 78, 124)
HSL
hsl(274, 23%, 40%)
HSB
hsb(274, 37%, 49%)
CMYK
cmyk(16%, 37%, 0%, 51%)
Oklch
oklch(47.0% 0.078 309.5)

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

#446E7C

Slate Blue · DimGray · Mint Ice

HEX
#446E7C
RGB
rgb(68, 110, 124)
HSL
hsl(195, 29%, 38%)
HSB
hsb(195, 45%, 49%)
CMYK
cmyk(45%, 11%, 0%, 51%)
Oklch
oklch(51.3% 0.052 221.1)

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

#2D2D2D

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#2D2D2D
RGB
rgb(45, 45, 45)
HSL
hsl(0, 0%, 18%)
HSB
hsb(0, 0%, 18%)
CMYK
cmyk(0%, 0%, 0%, 82%)
Oklch
oklch(29.7% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CADC99
AA98DC

Analogous

DCCC98
CADC99
A8DC98

Triadic

CADC99
98CADC
DC98CA

Split-Comp.

CADC99
98A8DC
CC98DC

Tetradic

CADC99
98DCCC
AA98DC
DC98A8

Contrast Matrix WCAG 2.1 Contrast

CADC99
C1516C
684E7C
446E7C
2D2D2D
—
3.0
AA Large
4.8
AA
3.8
AA Large
9.3
AAA
3.0
AA Large
—
1.6
Fail
1.2
Fail
3.1
AA Large
4.8
AA
1.6
Fail
—
1.3
Fail
1.9
Fail
3.8
AA Large
1.2
Fail
1.3
Fail
—
2.5
Fail
9.3
AAA
3.1
AA Large
1.9
Fail
2.5
Fail
—
White BG
1.5Fail
4.5AA
7.1AAA
5.6AA
13.8AAA
Black BG
14.2AAA
4.7AA
3.0Fail
3.8AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2A9
918F65
5D5D71
565779
2D2D2D

Deuteranopia

D1CFAD
979F64
5E606E
545178
2D2D2D

Tritanopia

CBB6B9
BB605F
676866
467675
2D2D2D

Achromatopsia

CFCFCF
767676
5B5B5B
636363
2D2D2D

Shades & Tints Shades & Tints

#CADC99

Dark
Light

#C1516C

Dark
Light

#684E7C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cadc99;
  --color-2: #c1516c;
  --color-3: #684e7c;
  --color-4: #446e7c;
  --color-5: #2d2d2d;
}

SCSS

$color-1: #cadc99;
$color-2: #c1516c;
$color-3: #684e7c;
$color-4: #446e7c;
$color-5: #2d2d2d;

TAILWIND

colors: {
  'brand-1': '#cadc99',
  'brand-2': '#c1516c',
  'brand-3': '#684e7c',
  'brand-4': '#446e7c',
  'brand-5': '#2d2d2d',
}

RGB Array

[202, 220, 153], [193, 81, 108], [104, 78, 124], [68, 110, 124], [45, 45, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CADC99, #C1516C, #684E7C, #446E7C, #2D2D2D is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cadc99; --color-2: #c1516c; --color-3: #684e7c; --color-4: #446e7c; --color-5: #2d2d2d. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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