← Back to Editor

#DCF453 · #CBCA74 · #B89A9A · #91858B · #495F70

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 Library

Color Details Color Details

#DCF453

Fresh Green · GreenYellow · Sunflower

HEX
#DCF453
RGB
rgb(220, 244, 83)
HSL
hsl(69, 88%, 64%)
HSB
hsb(69, 66%, 96%)
CMYK
cmyk(10%, 0%, 66%, 4%)
Oklch
oklch(92.1% 0.182 117.4)

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

#CBCA74

Fresh Green · BurlyWood · Sunflower

HEX
#CBCA74
RGB
rgb(203, 202, 116)
HSL
hsl(59, 46%, 63%)
HSB
hsb(59, 43%, 80%)
CMYK
cmyk(0%, 0%, 43%, 20%)
Oklch
oklch(82.1% 0.109 108.0)

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

#B89A9A

Peach Pink · DarkGray · Coral Red

HEX
#B89A9A
RGB
rgb(184, 154, 154)
HSL
hsl(0, 17%, 66%)
HSB
hsb(0, 16%, 72%)
CMYK
cmyk(0%, 16%, 16%, 28%)
Oklch
oklch(71.3% 0.036 18.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#91858B

Ash · Gray · Warm Gray

HEX
#91858B
RGB
rgb(145, 133, 139)
HSL
hsl(330, 5%, 55%)
HSB
hsb(330, 8%, 57%)
CMYK
cmyk(0%, 8%, 4%, 43%)
Oklch
oklch(62.9% 0.017 345.8)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#495F70

Slate Blue · DimGray · Prussian Blue

HEX
#495F70
RGB
rgb(73, 95, 112)
HSL
hsl(206, 21%, 36%)
HSB
hsb(206, 35%, 44%)
CMYK
cmyk(35%, 15%, 0%, 56%)
Oklch
oklch(47.4% 0.038 241.8)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DCF453
6B52F4

Analogous

F4BB52
DCF453
8BF452

Triadic

DCF453
52DCF4
F452DC

Split-Comp.

DCF453
528BF4
BB52F4

Tetradic

DCF453
52F4BB
6B52F4
F4528B

Contrast Matrix WCAG 2.1 Contrast

DCF453
CBCA74
B89A9A
91858B
495F70
—
1.4
Fail
2.1
Fail
2.9
Fail
5.4
AA
1.4
Fail
—
1.5
Fail
2.1
Fail
3.9
AA Large
2.1
Fail
1.5
Fail
—
1.4
Fail
2.6
Fail
2.9
Fail
2.1
Fail
1.4
Fail
—
1.9
Fail
5.4
AA
3.9
AA Large
2.6
Fail
1.9
Fail
—
White BG
1.2Fail
1.7Fail
2.6Fail
3.5AA Large
6.7AA
Black BG
17.1AAA
12.2AAA
8.1AAA
5.9AA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E77A
CBCB89
ABAB9A
8C8C8A
53536C

Deuteranopia

E5E383
CBCB8E
ADAF9A
8D8D89
51506B

Tritanopia

DD999F
CB999D
B69A9A
908888
4A6968

Achromatopsia

DADADA
C0C0C0
A3A3A3
898989
5A5A5A

Shades & Tints Shades & Tints

#DCF453

Dark
Light

#CBCA74

Dark
Light

#B89A9A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dcf453;
  --color-2: #cbca74;
  --color-3: #b89a9a;
  --color-4: #91858b;
  --color-5: #495f70;
}

SCSS

$color-1: #dcf453;
$color-2: #cbca74;
$color-3: #b89a9a;
$color-4: #91858b;
$color-5: #495f70;

TAILWIND

colors: {
  'brand-1': '#dcf453',
  'brand-2': '#cbca74',
  'brand-3': '#b89a9a',
  'brand-4': '#91858b',
  'brand-5': '#495f70',
}

RGB Array

[220, 244, 83], [203, 202, 116], [184, 154, 154], [145, 133, 139], [73, 95, 112]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DCF453, #CBCA74, #B89A9A, #91858B, #495F70 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: #dcf453; --color-2: #cbca74; --color-3: #b89a9a; --color-4: #91858b; --color-5: #495f70. 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 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