← Back to Editor

#FFFFDD · #BCB0B0 · #6B7D8B · #004C73 · #010D09

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#FFFFDD

Fresh Green · LightYellow · Lemon Cream

HEX
#FFFFDD
RGB
rgb(255, 255, 221)
HSL
hsl(60, 100%, 93%)
HSB
hsb(60, 13%, 100%)
CMYK
cmyk(0%, 0%, 13%, 0%)
Oklch
oklch(99.1% 0.044 107.2)

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

#BCB0B0

Peach Pink · DarkGray · Pearl Gray

HEX
#BCB0B0
RGB
rgb(188, 176, 176)
HSL
hsl(0, 8%, 71%)
HSB
hsb(0, 6%, 74%)
CMYK
cmyk(0%, 6%, 6%, 26%)
Oklch
oklch(76.7% 0.014 17.5)

Traditional「Peach Pink」· Paint「Pearl Gray」· Creative Silver Lining

#6B7D8B

Slate Blue · SlateGray · Navy Blue

HEX
#6B7D8B
RGB
rgb(107, 125, 139)
HSL
hsl(206, 13%, 48%)
HSB
hsb(206, 23%, 55%)
CMYK
cmyk(23%, 10%, 0%, 45%)
Oklch
oklch(58.0% 0.030 241.5)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#004C73

Lake Blue · Teal · Prussian Blue

HEX
#004C73
RGB
rgb(0, 76, 115)
HSL
hsl(200, 100%, 23%)
HSB
hsb(200, 100%, 45%)
CMYK
cmyk(100%, 34%, 0%, 55%)
Oklch
oklch(39.8% 0.092 240.4)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#010D09

Mineral Blue · Black · Peacock Green

HEX
#010D09
RGB
rgb(1, 13, 9)
HSL
hsl(160, 86%, 3%)
HSB
hsb(160, 92%, 5%)
CMYK
cmyk(92%, 0%, 31%, 95%)
Oklch
oklch(14.3% 0.024 174.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFFDD
DBDBFF

Analogous

FFEDDB
FFFFDD
EDFFDB

Triadic

FFFFDD
DBFFFF
FFDBFF

Split-Comp.

FFFFDD
DBEDFF
EDDBFF

Tetradic

FFFFDD
DBFFED
DBDBFF
FFDBED

Contrast Matrix WCAG 2.1 Contrast

FFFFDD
BCB0B0
6B7D8B
004C73
010D09
—
2.1
Fail
4.2
AA Large
9.0
AAA
19.4
AAA
2.1
Fail
—
2.0
Fail
4.4
AA Large
9.4
AAA
4.2
AA Large
2.0
Fail
—
2.2
Fail
4.6
AA
9.0
AAA
4.4
AA Large
2.2
Fail
—
2.1
Fail
19.4
AAA
9.4
AAA
4.6
AA
2.1
Fail
—
White BG
1.0Fail
2.1Fail
4.3AA Large
9.2AAA
19.8AAA
Black BG
20.6AAA
10.0AAA
4.9AA
2.3Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FFFFE5
B7B7B0
737388
21226A
06060A

Deuteranopia

FFFFE7
B8B8B0
727087
1D1767
06050A

Tritanopia

FFECED
BBB0B0
6C8584
046260
020B0B

Achromatopsia

FBFBFB
B4B4B4
797979
3A3A3A
090909

Shades & Tints Shades & Tints

#FFFFDD

Dark
Light

#BCB0B0

Dark
Light

#6B7D8B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffffdd;
  --color-2: #bcb0b0;
  --color-3: #6b7d8b;
  --color-4: #004c73;
  --color-5: #010d09;
}

SCSS

$color-1: #ffffdd;
$color-2: #bcb0b0;
$color-3: #6b7d8b;
$color-4: #004c73;
$color-5: #010d09;

TAILWIND

colors: {
  'brand-1': '#ffffdd',
  'brand-2': '#bcb0b0',
  'brand-3': '#6b7d8b',
  'brand-4': '#004c73',
  'brand-5': '#010d09',
}

RGB Array

[255, 255, 221], [188, 176, 176], [107, 125, 139], [0, 76, 115], [1, 13, 9]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #FFFFDD, #BCB0B0, #6B7D8B, #004C73, #010D09 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ffffdd; --color-2: #bcb0b0; --color-3: #6b7d8b; --color-4: #004c73; --color-5: #010d09. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 warm-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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