← Back to Editor

#BBD9E1 · #F6F6F4 · #D1CFA9 · #F69B28 · #FE7900

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#BBD9E1

Sky Blue · LightBlue · Glacier Blue

HEX
#BBD9E1
RGB
rgb(187, 217, 225)
HSL
hsl(193, 39%, 81%)
HSB
hsb(193, 17%, 88%)
CMYK
cmyk(17%, 4%, 0%, 12%)
Oklch
oklch(86.6% 0.034 215.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#F6F6F4

Fresh Green · SeaShell · Lemon Cream

HEX
#F6F6F4
RGB
rgb(246, 246, 244)
HSL
hsl(60, 10%, 96%)
HSB
hsb(60, 1%, 96%)
CMYK
cmyk(0%, 0%, 1%, 4%)
Oklch
oklch(97.3% 0.003 106.4)

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

#D1CFA9

Fresh Green · Silver · Sunflower

HEX
#D1CFA9
RGB
rgb(209, 207, 169)
HSL
hsl(57, 30%, 74%)
HSB
hsb(57, 19%, 82%)
CMYK
cmyk(0%, 1%, 19%, 18%)
Oklch
oklch(84.6% 0.051 104.9)

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

#F69B28

Ginger · GoldenRod · Warm Sun

HEX
#F69B28
RGB
rgb(246, 155, 40)
HSL
hsl(33, 92%, 56%)
HSB
hsb(33, 84%, 96%)
CMYK
cmyk(0%, 37%, 84%, 4%)
Oklch
oklch(76.5% 0.159 65.8)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#FE7900

Tangerine · Orange · Amber Brown

HEX
#FE7900
RGB
rgb(254, 121, 0)
HSL
hsl(29, 100%, 50%)
HSB
hsb(29, 100%, 100%)
CMYK
cmyk(0%, 52%, 100%, 0%)
Oklch
oklch(72.0% 0.189 50.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBD9E1
E1C4BC

Analogous

BCE1D7
BBD9E1
BCC6E1

Triadic

BBD9E1
E1BCD9
D9E1BC

Split-Comp.

BBD9E1
E1BCC6
E1D7BC

Tetradic

BBD9E1
D7BCE1
E1C4BC
C6E1BC

Contrast Matrix WCAG 2.1 Contrast

BBD9E1
F6F6F4
D1CFA9
F69B28
FE7900
—
1.4
Fail
1.1
Fail
1.5
Fail
1.8
Fail
1.4
Fail
—
1.5
Fail
2.0
Fail
2.4
Fail
1.1
Fail
1.5
Fail
—
1.4
Fail
1.7
Fail
1.5
Fail
2.0
Fail
1.4
Fail
—
1.2
Fail
1.8
Fail
2.4
Fail
1.7
Fail
1.2
Fail
—
White BG
1.5Fail
1.1Fail
1.6Fail
2.2Fail
2.6Fail
Black BG
14.1AAA
19.4AAA
13.2AAA
9.6AAA
7.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C8C8DF
F6F6F4
D0D0B2
CFCE44
C4C31D

Deuteranopia

C6C4DF
F6F6F5
D0D0B4
D4DB4B
CCD624

Tritanopia

BDDEDD
F6F5F5
D1B9BB
F15A5F
F73439

Achromatopsia

D1D1D1
F6F6F6
CBCBCB
A9A9A9
939393

Shades & Tints Shades & Tints

#BBD9E1

Dark
Light

#F6F6F4

Dark
Light

#D1CFA9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbd9e1;
  --color-2: #f6f6f4;
  --color-3: #d1cfa9;
  --color-4: #f69b28;
  --color-5: #fe7900;
}

SCSS

$color-1: #bbd9e1;
$color-2: #f6f6f4;
$color-3: #d1cfa9;
$color-4: #f69b28;
$color-5: #fe7900;

TAILWIND

colors: {
  'brand-1': '#bbd9e1',
  'brand-2': '#f6f6f4',
  'brand-3': '#d1cfa9',
  'brand-4': '#f69b28',
  'brand-5': '#fe7900',
}

RGB Array

[187, 217, 225], [246, 246, 244], [209, 207, 169], [246, 155, 40], [254, 121, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBD9E1, #F6F6F4, #D1CFA9, #F69B28, #FE7900 is ideal for: health products, baby brands, fresh-style blogs, 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: #bbd9e1; --color-2: #f6f6f4; --color-3: #d1cfa9; --color-4: #f69b28; --color-5: #fe7900. 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. 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