#CF6363 + #D99157 + #DBBE56 + #9ABF97 + #73ADBF · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CF6363

Crimson · LightCoral · Passion Red

HEX

#CF6363

RGB

rgb(207, 99, 99)

HSL

hsl(0, 53%, 60%)

HSB

hsb(0, 52%, 81%)

CMYK

cmyk(0%, 52%, 52%, 19%)

Oklch

oklch(63.0% 0.137 21.8)

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

#D99157

Tangerine · SandyBrown · Warm Sun

HEX

#D99157

RGB

rgb(217, 145, 87)

HSL

hsl(27, 63%, 60%)

HSB

hsb(27, 60%, 85%)

CMYK

cmyk(0%, 33%, 60%, 15%)

Oklch

oklch(71.7% 0.115 58.4)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#DBBE56

Ginger · SandyBrown · Sunflower

HEX

#DBBE56

RGB

rgb(219, 190, 86)

HSL

hsl(47, 65%, 60%)

HSB

hsb(47, 61%, 86%)

CMYK

cmyk(0%, 13%, 61%, 14%)

Oklch

oklch(80.6% 0.127 93.8)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#9ABF97

Celadon · DarkSeaGreen · Apple Green

HEX

#9ABF97

RGB

rgb(154, 191, 151)

HSL

hsl(116, 24%, 67%)

HSB

hsb(116, 21%, 75%)

CMYK

cmyk(19%, 0%, 21%, 25%)

Oklch

oklch(76.7% 0.069 142.9)

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

#73ADBF

Slate Blue · CadetBlue · Lake Green

HEX

#73ADBF

RGB

rgb(115, 173, 191)

HSL

hsl(194, 37%, 60%)

HSB

hsb(194, 40%, 75%)

CMYK

cmyk(40%, 9%, 0%, 25%)

Oklch

oklch(71.4% 0.066 219.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF6363

63CFCF

Analogous

CF6399

CF6363

CF9963

Triadic

CF6363

63CF63

6363CF

Split-Comp.

CF6363

63CF99

6399CF

Tetradic

CF6363

99CF63

63CFCF

9963CF

Contrast Matrix WCAG 2.1 Contrast

CF6363	D99157	DBBE56	9ABF97	73ADBF
—	1.4 Fail	2.0 Fail	1.8 Fail	1.5 Fail
1.4 Fail	—	1.4 Fail	1.3 Fail	1.0 Fail
2.0 Fail	1.4 Fail	—	1.1 Fail	1.4 Fail
1.8 Fail	1.3 Fail	1.1 Fail	—	1.2 Fail
1.5 Fail	1.0 Fail	1.4 Fail	1.2 Fail	—

White BG

3.7AA Large

2.6Fail

1.8Fail

2.0Fail

2.5Fail

Black BG

5.6AA

8.1AAA

11.5AAA

10.3AAA

8.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A09F63

BAB965

CECE6F

AAAAA1

8C8DBB

Deuteranopia

A7AF63

BEC368

D0D275

A8A5A3

8984BA

Tritanopia

CA6363

D57073

DA8387

9CA8AA

76B7B6

Achromatopsia

838383

A0A0A0

BBBBBB

AFAFAF

9E9E9E

Shades & Tints Shades & Tints

#CF6363

Dark

Light

#D99157

Dark

Light

#DBBE56

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf6363;
  --color-2: #d99157;
  --color-3: #dbbe56;
  --color-4: #9abf97;
  --color-5: #73adbf;
}

SCSS

$color-1: #cf6363;
$color-2: #d99157;
$color-3: #dbbe56;
$color-4: #9abf97;
$color-5: #73adbf;

TAILWIND

colors: {
  'brand-1': '#cf6363',
  'brand-2': '#d99157',
  'brand-3': '#dbbe56',
  'brand-4': '#9abf97',
  'brand-5': '#73adbf',
}

RGB Array

[207, 99, 99], [217, 145, 87], [219, 190, 86], [154, 191, 151], [115, 173, 191]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #CF6363, #D99157, #DBBE56, #9ABF97, #73ADBF is ideal for: corporate websites, product showcases, portfolios. 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: #cf6363; --color-2: #d99157; --color-3: #dbbe56; --color-4: #9abf97; --color-5: #73adbf. 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. 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 dark-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