← Back to Editor

#9AD4C4 · #B2DCAC · #CCCB7A · #FC9974 · #3E4951

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

#9AD4C4

Jade · LightSteelBlue · Lake Green

HEX
#9AD4C4
RGB
rgb(154, 212, 196)
HSL
hsl(163, 40%, 72%)
HSB
hsb(163, 27%, 83%)
CMYK
cmyk(27%, 0%, 8%, 17%)
Oklch
oklch(82.6% 0.064 175.7)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#B2DCAC

Celadon · Silver · Apple Green

HEX
#B2DCAC
RGB
rgb(178, 220, 172)
HSL
hsl(113, 41%, 77%)
HSB
hsb(113, 22%, 86%)
CMYK
cmyk(19%, 0%, 22%, 14%)
Oklch
oklch(85.2% 0.079 141.6)

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

#CCCB7A

Fresh Green · BurlyWood · Sunflower

HEX
#CCCB7A
RGB
rgb(204, 203, 122)
HSL
hsl(59, 45%, 64%)
HSB
hsb(59, 40%, 80%)
CMYK
cmyk(0%, 0%, 40%, 20%)
Oklch
oklch(82.5% 0.103 107.8)

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

#FC9974

Apricot · LightSalmon · Warm Sun

HEX
#FC9974
RGB
rgb(252, 153, 116)
HSL
hsl(16, 96%, 72%)
HSB
hsb(16, 54%, 99%)
CMYK
cmyk(0%, 39%, 54%, 1%)
Oklch
oklch(77.7% 0.130 41.1)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#3E4951

Slate Blue · DarkSlateGray · Prussian Blue

HEX
#3E4951
RGB
rgb(62, 73, 81)
HSL
hsl(205, 13%, 28%)
HSB
hsb(205, 23%, 32%)
CMYK
cmyk(23%, 10%, 0%, 68%)
Oklch
oklch(39.9% 0.020 239.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AD4C4
D49BAB

Analogous

9BD4A7
9AD4C4
9BC8D4

Triadic

9AD4C4
C49BD4
D4C49B

Split-Comp.

9AD4C4
D49BC8
D4A79B

Tetradic

9AD4C4
A79BD4
D49BAB
C8D49B

Contrast Matrix WCAG 2.1 Contrast

9AD4C4
B2DCAC
CCCB7A
FC9974
3E4951
—
1.1
Fail
1.0
Fail
1.3
Fail
5.5
AA
1.1
Fail
—
1.1
Fail
1.4
Fail
6.0
AA
1.0
Fail
1.1
Fail
—
1.2
Fail
5.4
AA
1.3
Fail
1.4
Fail
1.2
Fail
—
4.4
AA Large
5.5
AA
6.0
AA
5.4
AA
4.4
AA Large
—
White BG
1.7Fail
1.5Fail
1.7Fail
2.1Fail
9.2AAA
Black BG
12.6AAA
13.7AAA
12.4AAA
9.9AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B4C8
C4C5B8
CCCC8E
D1D07D
43434F

Deuteranopia

B0ABC9
C2BFBA
CCCC92
D7DE7F
42414F

Tritanopia

9DCBCC
B4C1C3
CC9DA0
F78486
3F4E4D

Achromatopsia

C1C1C1
CACACA
C2C2C2
B2B2B2
474747

Shades & Tints Shades & Tints

#9AD4C4

Dark
Light

#B2DCAC

Dark
Light

#CCCB7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ad4c4;
  --color-2: #b2dcac;
  --color-3: #cccb7a;
  --color-4: #fc9974;
  --color-5: #3e4951;
}

SCSS

$color-1: #9ad4c4;
$color-2: #b2dcac;
$color-3: #cccb7a;
$color-4: #fc9974;
$color-5: #3e4951;

TAILWIND

colors: {
  'brand-1': '#9ad4c4',
  'brand-2': '#b2dcac',
  'brand-3': '#cccb7a',
  'brand-4': '#fc9974',
  'brand-5': '#3e4951',
}

RGB Array

[154, 212, 196], [178, 220, 172], [204, 203, 122], [252, 153, 116], [62, 73, 81]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AD4C4, #B2DCAC, #CCCB7A, #FC9974, #3E4951 is ideal for: 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: #9ad4c4; --color-2: #b2dcac; --color-3: #cccb7a; --color-4: #fc9974; --color-5: #3e4951. 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. 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