#CBDFD7 + #98DBC6 + #86B0A2 + #FFD818 + #FF4618 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CBDFD7

Jade · LightGray · Mint Green

HEX

#CBDFD7

RGB

rgb(203, 223, 215)

HSL

hsl(156, 24%, 84%)

HSB

hsb(156, 9%, 87%)

CMYK

cmyk(9%, 0%, 4%, 13%)

Oklch

oklch(88.6% 0.024 169.8)

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

#98DBC6

Jade · LightBlue · Lake Green

HEX

#98DBC6

RGB

rgb(152, 219, 198)

HSL

hsl(161, 48%, 73%)

HSB

hsb(161, 31%, 86%)

CMYK

cmyk(31%, 0%, 10%, 14%)

Oklch

oklch(84.1% 0.074 172.9)

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

#86B0A2

Jade · DarkSeaGreen · Lake Green

HEX

#86B0A2

RGB

rgb(134, 176, 162)

HSL

hsl(160, 21%, 61%)

HSB

hsb(160, 24%, 69%)

CMYK

cmyk(24%, 0%, 8%, 31%)

Oklch

oklch(72.3% 0.050 172.4)

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

#FFD818

Autumn Sage · Gold · Sunflower

HEX

#FFD818

RGB

rgb(255, 216, 24)

HSL

hsl(50, 100%, 55%)

HSB

hsb(50, 91%, 100%)

CMYK

cmyk(0%, 15%, 91%, 0%)

Oklch

oklch(88.9% 0.179 95.4)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#FF4618

Vermilion · OrangeRed · Passion Red

HEX

#FF4618

RGB

rgb(255, 70, 24)

HSL

hsl(12, 100%, 55%)

HSB

hsb(12, 91%, 100%)

CMYK

cmyk(0%, 73%, 91%, 0%)

Oklch

oklch(66.2% 0.227 34.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBDFD7

E0CCD4

Analogous

CCE0CE

CBDFD7

CCDEE0

Triadic

CBDFD7

D8CCE0

E0D8CC

Split-Comp.

CBDFD7

E0CCDE

E0CECC

Tetradic

CBDFD7

CECCE0

E0CCD4

DEE0CC

Contrast Matrix WCAG 2.1 Contrast

CBDFD7	98DBC6	86B0A2	FFD818	FF4618
—	1.1 Fail	1.7 Fail	1.0 Fail	2.5 Fail
1.1 Fail	—	1.5 Fail	1.1 Fail	2.2 Fail
1.7 Fail	1.5 Fail	—	1.7 Fail	1.4 Fail
1.0 Fail	1.1 Fail	1.7 Fail	—	2.5 Fail
2.5 Fail	2.2 Fail	1.4 Fail	2.5 Fail	—

White BG

1.4Fail

1.6Fail

2.4Fail

1.4Fail

3.4AA Large

Black BG

15.1AAA

13.3AAA

8.7AAA

15.1AAA

6.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4D9

B5B6CB

9899A5

EEEE46

AFAD23

Deuteranopia

D3D1D9

B1ACCC

9693A6

F0F352

BAC826

Tritanopia

CCDADB

9BCFD0

88A8A9

FD6B73

F62C2E

Achromatopsia

D8D8D8

C5C5C5

A2A2A2

CECECE

787878

Shades & Tints Shades & Tints

#CBDFD7

Dark

Light

#98DBC6

Dark

Light

#86B0A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbdfd7;
  --color-2: #98dbc6;
  --color-3: #86b0a2;
  --color-4: #ffd818;
  --color-5: #ff4618;
}

SCSS

$color-1: #cbdfd7;
$color-2: #98dbc6;
$color-3: #86b0a2;
$color-4: #ffd818;
$color-5: #ff4618;

TAILWIND

colors: {
  'brand-1': '#cbdfd7',
  'brand-2': '#98dbc6',
  'brand-3': '#86b0a2',
  'brand-4': '#ffd818',
  'brand-5': '#ff4618',
}

RGB Array

[203, 223, 215], [152, 219, 198], [134, 176, 162], [255, 216, 24], [255, 70, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBDFD7, #98DBC6, #86B0A2, #FFD818, #FF4618 is ideal for: health products, baby brands, fresh-style blogs. 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: #cbdfd7; --color-2: #98dbc6; --color-3: #86b0a2; --color-4: #ffd818; --color-5: #ff4618. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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