#CAE6D3 + #F7F7CB + #F09476 + #C97395 + #817A91 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CAE6D3

Celadon · LightGray · Mint Green

HEX

#CAE6D3

RGB

rgb(202, 230, 211)

HSL

hsl(139, 36%, 85%)

HSB

hsb(139, 12%, 90%)

CMYK

cmyk(12%, 0%, 8%, 10%)

Oklch

oklch(89.9% 0.039 155.9)

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

#F7F7CB

Fresh Green · Beige · Lemon Cream

HEX

#F7F7CB

RGB

rgb(247, 247, 203)

HSL

hsl(60, 73%, 88%)

HSB

hsb(60, 18%, 97%)

CMYK

cmyk(0%, 0%, 18%, 3%)

Oklch

oklch(96.5% 0.057 107.4)

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

#F09476

Apricot · DarkSalmon · Warm Sun

HEX

#F09476

RGB

rgb(240, 148, 118)

HSL

hsl(15, 80%, 70%)

HSB

hsb(15, 51%, 94%)

CMYK

cmyk(0%, 38%, 51%, 6%)

Oklch

oklch(75.5% 0.119 38.8)

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

#C97395

Rouge · LightCoral · Rose Pink

HEX

#C97395

RGB

rgb(201, 115, 149)

HSL

hsl(336, 44%, 62%)

HSB

hsb(336, 43%, 79%)

CMYK

cmyk(0%, 43%, 26%, 21%)

Oklch

oklch(66.0% 0.115 355.5)

Traditional「Rouge」· Paint「Rose Pink」· Creative Rose Petal

#817A91

Deep Indigo · Gray · Warm Gray

HEX

#817A91

RGB

rgb(129, 122, 145)

HSL

hsl(258, 9%, 52%)

HSB

hsb(258, 16%, 57%)

CMYK

cmyk(11%, 16%, 0%, 43%)

Oklch

oklch(59.4% 0.035 299.2)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAE6D3

E7CBDE

Analogous

D0E7CB

CAE6D3

CBE7E1

Triadic

CAE6D3

D4CBE7

E7D4CB

Split-Comp.

CAE6D3

E1CBE7

E7CBD0

Tetradic

CAE6D3

CBD0E7

E7CBDE

E7E1CB

Contrast Matrix WCAG 2.1 Contrast

CAE6D3	F7F7CB	F09476	C97395	817A91
—	1.2 Fail	1.7 Fail	2.5 Fail	3.1 AA Large
1.2 Fail	—	2.1 Fail	3.0 AA Large	3.7 AA Large
1.7 Fail	2.1 Fail	—	1.4 Fail	1.8 Fail
2.5 Fail	3.0 AA Large	1.4 Fail	—	1.2 Fail
3.1 AA Large	3.7 AA Large	1.8 Fail	1.2 Fail	—

White BG

1.3Fail

1.1Fail

2.3Fail

3.3AA Large

4.1AA Large

Black BG

15.8AAA

19.1AAA

9.2AAA

6.4AA

5.1AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6D8

F7F7D6

C8C77D

A4A38D

7E7E8B

Deuteranopia

D5D2D9

F7F7D8

CED47F

A9AF8B

7E7F8A

Tritanopia

CBDBDC

F7DEE0

EB8384

C58685

818786

Achromatopsia

DBDBDB

F2F2F2

ACACAC

919191

7F7F7F

Shades & Tints Shades & Tints

#CAE6D3

Dark

Light

#F7F7CB

Dark

Light

#F09476

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cae6d3;
  --color-2: #f7f7cb;
  --color-3: #f09476;
  --color-4: #c97395;
  --color-5: #817a91;
}

SCSS

$color-1: #cae6d3;
$color-2: #f7f7cb;
$color-3: #f09476;
$color-4: #c97395;
$color-5: #817a91;

TAILWIND

colors: {
  'brand-1': '#cae6d3',
  'brand-2': '#f7f7cb',
  'brand-3': '#f09476',
  'brand-4': '#c97395',
  'brand-5': '#817a91',
}

RGB Array

[202, 230, 211], [247, 247, 203], [240, 148, 118], [201, 115, 149], [129, 122, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CAE6D3, #F7F7CB, #F09476, #C97395, #817A91 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: #cae6d3; --color-2: #f7f7cb; --color-3: #f09476; --color-4: #c97395; --color-5: #817a91. 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