#BFE2BA + #CFDBAD + #F2C493 + #FFA782 + #74B99C · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#BFE2BA

Celadon · Silver · Mint Green

HEX

#BFE2BA

RGB

rgb(191, 226, 186)

HSL

hsl(112, 41%, 81%)

HSB

hsb(112, 18%, 89%)

CMYK

cmyk(15%, 0%, 18%, 11%)

Oklch

oklch(87.7% 0.066 141.6)

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

#CFDBAD

Willow Green · Silver · Apple Green

HEX

#CFDBAD

RGB

rgb(207, 219, 173)

HSL

hsl(76, 39%, 77%)

HSB

hsb(76, 21%, 86%)

CMYK

cmyk(5%, 0%, 21%, 14%)

Oklch

oklch(87.1% 0.063 119.6)

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

#F2C493

Goose Yellow · BurlyWood · Peach Orange

HEX

#F2C493

RGB

rgb(242, 196, 147)

HSL

hsl(31, 79%, 76%)

HSB

hsb(31, 39%, 95%)

CMYK

cmyk(0%, 19%, 39%, 5%)

Oklch

oklch(84.9% 0.083 68.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#FFA782

Apricot · LightSalmon · Warm Sun

HEX

#FFA782

RGB

rgb(255, 167, 130)

HSL

hsl(18, 100%, 75%)

HSB

hsb(18, 49%, 100%)

CMYK

cmyk(0%, 35%, 49%, 0%)

Oklch

oklch(80.7% 0.116 43.5)

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

#74B99C

Mineral Blue · MediumAquaMarine · Olive Green

HEX

#74B99C

RGB

rgb(116, 185, 156)

HSL

hsl(155, 33%, 59%)

HSB

hsb(155, 37%, 73%)

CMYK

cmyk(37%, 0%, 16%, 27%)

Oklch

oklch(73.1% 0.082 165.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFE2BA

DDBBE2

Analogous

D4E2BB

BFE2BA

BBE2C9

Triadic

BFE2BA

BBC0E2

E2BBC0

Split-Comp.

BFE2BA

C9BBE2

E2BBD4

Tetradic

BFE2BA

BBD4E2

DDBBE2

E2C9BB

Contrast Matrix WCAG 2.1 Contrast

BFE2BA	CFDBAD	F2C493	FFA782	74B99C
—	1.0 Fail	1.1 Fail	1.3 Fail	1.6 Fail
1.0 Fail	—	1.1 Fail	1.3 Fail	1.6 Fail
1.1 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.3 Fail	1.3 Fail	1.2 Fail	—	1.2 Fail
1.6 Fail	1.6 Fail	1.4 Fail	1.2 Fail	—

White BG

1.4Fail

1.5Fail

1.6Fail

1.9Fail

2.3Fail

Black BG

14.8AAA

14.4AAA

13.1AAA

11.1AAA

9.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CECEC4

D4D4B8

DEDE9F

D9D88B

9292A3

Deuteranopia

CCCAC6

D4D3BB

E1E4A2

DEE58D

8E89A5

Tritanopia

C1CBCD

D0C1C3

F0A8AA

FB9294

77A9AA

Achromatopsia

D3D3D3

D2D2D2

CCCCCC

BDBDBD

A1A1A1

Shades & Tints Shades & Tints

#BFE2BA

Dark

Light

#CFDBAD

Dark

Light

#F2C493

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfe2ba;
  --color-2: #cfdbad;
  --color-3: #f2c493;
  --color-4: #ffa782;
  --color-5: #74b99c;
}

SCSS

$color-1: #bfe2ba;
$color-2: #cfdbad;
$color-3: #f2c493;
$color-4: #ffa782;
$color-5: #74b99c;

TAILWIND

colors: {
  'brand-1': '#bfe2ba',
  'brand-2': '#cfdbad',
  'brand-3': '#f2c493',
  'brand-4': '#ffa782',
  'brand-5': '#74b99c',
}

RGB Array

[191, 226, 186], [207, 219, 173], [242, 196, 147], [255, 167, 130], [116, 185, 156]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #BFE2BA, #CFDBAD, #F2C493, #FFA782, #74B99C 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: #bfe2ba; --color-2: #cfdbad; --color-3: #f2c493; --color-4: #ffa782; --color-5: #74b99c. 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 warm-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