#FFF3D6 + #CBDBC1 + #BBD4BF + #ADC8B9 + #A591AC · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#FFF3D6

Goose Yellow · Beige · Lemon Cream

HEX

#FFF3D6

RGB

rgb(255, 243, 214)

HSL

hsl(42, 100%, 92%)

HSB

hsb(42, 16%, 100%)

CMYK

cmyk(0%, 5%, 16%, 0%)

Oklch

oklch(96.6% 0.040 88.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#CBDBC1

Celadon · LightGray · Mint Green

HEX

#CBDBC1

RGB

rgb(203, 219, 193)

HSL

hsl(97, 27%, 81%)

HSB

hsb(97, 12%, 86%)

CMYK

cmyk(7%, 0%, 12%, 14%)

Oklch

oklch(87.2% 0.039 133.3)

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

#BBD4BF

Celadon · Silver · Apple Green

HEX

#BBD4BF

RGB

rgb(187, 212, 191)

HSL

hsl(130, 23%, 78%)

HSB

hsb(130, 12%, 83%)

CMYK

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

Oklch

oklch(84.5% 0.039 149.9)

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

#ADC8B9

Celadon · Silver · Apple Green

HEX

#ADC8B9

RGB

rgb(173, 200, 185)

HSL

hsl(147, 20%, 73%)

HSB

hsb(147, 13%, 78%)

CMYK

cmyk(13%, 0%, 8%, 22%)

Oklch

oklch(80.8% 0.036 161.2)

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

#A591AC

Lilac · DarkGray · Lilac Purple

HEX

#A591AC

RGB

rgb(165, 145, 172)

HSL

hsl(284, 14%, 62%)

HSB

hsb(284, 16%, 67%)

CMYK

cmyk(4%, 16%, 0%, 33%)

Oklch

oklch(68.3% 0.045 317.3)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF3D6

D6E2FF

Analogous

FFDED6

FFF3D6

F7FFD6

Triadic

FFF3D6

D6FFF3

F3D6FF

Split-Comp.

FFF3D6

D6F7FF

DED6FF

Tetradic

FFF3D6

D6FFDE

D6E2FF

FFD6F7

Contrast Matrix WCAG 2.1 Contrast

FFF3D6	CBDBC1	BBD4BF	ADC8B9	A591AC
—	1.3 Fail	1.4 Fail	1.6 Fail	2.6 Fail
1.3 Fail	—	1.1 Fail	1.2 Fail	2.0 Fail
1.4 Fail	1.1 Fail	—	1.1 Fail	1.8 Fail
1.6 Fail	1.2 Fail	1.1 Fail	—	1.6 Fail
2.6 Fail	2.0 Fail	1.8 Fail	1.6 Fail	—

White BG

1.1Fail

1.5Fail

1.6Fail

1.8Fail

2.9Fail

Black BG

19.0AAA

14.4AAA

13.3AAA

11.7AAA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FAFADD

D2D2C7

C6C6C4

B9B9BD

9C9CA5

Deuteranopia

FBFBDF

D1D0C9

C4C3C5

B7B5BE

9E9FA4

Tritanopia

FEE3E4

CCCCCD

BCC8C9

AEBFC0

A4A09F

Achromatopsia

F3F3F3

D3D3D3

CACACA

BEBEBE

9A9A9A

Shades & Tints Shades & Tints

#FFF3D6

Dark

Light

#CBDBC1

Dark

Light

#BBD4BF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff3d6;
  --color-2: #cbdbc1;
  --color-3: #bbd4bf;
  --color-4: #adc8b9;
  --color-5: #a591ac;
}

SCSS

$color-1: #fff3d6;
$color-2: #cbdbc1;
$color-3: #bbd4bf;
$color-4: #adc8b9;
$color-5: #a591ac;

TAILWIND

colors: {
  'brand-1': '#fff3d6',
  'brand-2': '#cbdbc1',
  'brand-3': '#bbd4bf',
  'brand-4': '#adc8b9',
  'brand-5': '#a591ac',
}

RGB Array

[255, 243, 214], [203, 219, 193], [187, 212, 191], [173, 200, 185], [165, 145, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #FFF3D6, #CBDBC1, #BBD4BF, #ADC8B9, #A591AC 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: #fff3d6; --color-2: #cbdbc1; --color-3: #bbd4bf; --color-4: #adc8b9; --color-5: #a591ac. 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 nature-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