← Back to Editor

#000200 · #F7A580 · #FFD698 · #F3E4BB · #776861

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#000200

Pine Green · Black · Dark Green

HEX
#000200
RGB
rgb(0, 2, 0)
HSL
hsl(120, 100%, 0%)
HSB
hsb(120, 100%, 1%)
CMYK
cmyk(100%, 0%, 100%, 99%)
Oklch
oklch(7.3% 0.025 142.5)

Traditional「Pine Green」· Paint「Dark Green」· Creative Blush Sunrise

#F7A580

Apricot · LightSalmon · Warm Sun

HEX
#F7A580
RGB
rgb(247, 165, 128)
HSL
hsl(19, 88%, 74%)
HSB
hsb(19, 48%, 97%)
CMYK
cmyk(0%, 33%, 48%, 3%)
Oklch
oklch(79.4% 0.110 45.0)

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

#FFD698

Goose Yellow · Khaki · Peach Orange

HEX
#FFD698
RGB
rgb(255, 214, 152)
HSL
hsl(36, 100%, 80%)
HSB
hsb(36, 40%, 100%)
CMYK
cmyk(0%, 16%, 40%, 0%)
Oklch
oklch(89.7% 0.091 77.5)

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

#F3E4BB

Goose Yellow · Wheat · Lemon Cream

HEX
#F3E4BB
RGB
rgb(243, 228, 187)
HSL
hsl(44, 70%, 84%)
HSB
hsb(44, 23%, 95%)
CMYK
cmyk(0%, 6%, 23%, 5%)
Oklch
oklch(92.1% 0.056 90.3)

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

#776861

Tangerine · DimGray · Amber Brown

HEX
#776861
RGB
rgb(119, 104, 97)
HSL
hsl(19, 10%, 42%)
HSB
hsb(19, 18%, 47%)
CMYK
cmyk(0%, 13%, 18%, 53%)
Oklch
oklch(52.9% 0.022 46.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

000200
000000

Analogous

000000
000200
000000

Triadic

000200
000000
000000

Split-Comp.

000200
000000
000000

Tetradic

000200
000000
000000
000000

Contrast Matrix WCAG 2.1 Contrast

000200
F7A580
FFD698
F3E4BB
776861
—
10.6
AAA
15.2
AAA
16.5
AAA
3.9
AA Large
10.6
AAA
—
1.4
Fail
1.6
Fail
2.7
Fail
15.2
AAA
1.4
Fail
—
1.1
Fail
3.9
AA Large
16.5
AAA
1.6
Fail
1.1
Fail
—
4.2
AA Large
3.9
AA Large
2.7
Fail
3.9
AA Large
4.2
AA Large
—
White BG
20.8AAA
2.0Fail
1.4Fail
1.3Fail
5.3AA
Black BG
1.0Fail
10.6AAA
15.3AAA
16.6AAA
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

010100
D3D389
EDEDA7
EDECC5
717063

Deuteranopia

010101
D8DE8B
F0F3AB
EDEFC7
717363

Tritanopia

000101
F39092
FDB3B5
F2CDCE
766464

Achromatopsia

010101
B9B9B9
DBDBDB
E4E4E4
6C6C6C

Shades & Tints Shades & Tints

#000200

Dark
Light

#F7A580

Dark
Light

#FFD698

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #000200;
  --color-2: #f7a580;
  --color-3: #ffd698;
  --color-4: #f3e4bb;
  --color-5: #776861;
}

SCSS

$color-1: #000200;
$color-2: #f7a580;
$color-3: #ffd698;
$color-4: #f3e4bb;
$color-5: #776861;

TAILWIND

colors: {
  'brand-1': '#000200',
  'brand-2': '#f7a580',
  'brand-3': '#ffd698',
  'brand-4': '#f3e4bb',
  'brand-5': '#776861',
}

RGB Array

[0, 2, 0], [247, 165, 128], [255, 214, 152], [243, 228, 187], [119, 104, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #000200, #F7A580, #FFD698, #F3E4BB, #776861 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: #000200; --color-2: #f7a580; --color-3: #ffd698; --color-4: #f3e4bb; --color-5: #776861. 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