← Back to Editor

#F2808E · #9E7B4A · #D4AC4E · #82C49D · #DBD9C5

warm

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F2808E

Peach Pink · LightCoral · Coral Red

HEX
#F2808E
RGB
rgb(242, 128, 142)
HSL
hsl(353, 81%, 73%)
HSB
hsb(353, 47%, 95%)
CMYK
cmyk(0%, 47%, 41%, 5%)
Oklch
oklch(73.1% 0.140 13.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#9E7B4A

Ochre · Sienna · Amber Brown

HEX
#9E7B4A
RGB
rgb(158, 123, 74)
HSL
hsl(35, 36%, 45%)
HSB
hsb(35, 53%, 62%)
CMYK
cmyk(0%, 22%, 53%, 38%)
Oklch
oklch(60.6% 0.079 74.7)

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

#D4AC4E

Ginger · SandyBrown · Sunflower

HEX
#D4AC4E
RGB
rgb(212, 172, 78)
HSL
hsl(42, 61%, 57%)
HSB
hsb(42, 63%, 83%)
CMYK
cmyk(0%, 19%, 63%, 17%)
Oklch
oklch(76.3% 0.121 86.0)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#82C49D

Celadon · DarkSeaGreen · Apple Green

HEX
#82C49D
RGB
rgb(130, 196, 157)
HSL
hsl(145, 36%, 64%)
HSB
hsb(145, 34%, 77%)
CMYK
cmyk(34%, 0%, 20%, 23%)
Oklch
oklch(76.5% 0.088 157.6)

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

#DBD9C5

Fresh Green · LightGray · Lemon Cream

HEX
#DBD9C5
RGB
rgb(219, 217, 197)
HSL
hsl(55, 23%, 82%)
HSB
hsb(55, 10%, 86%)
CMYK
cmyk(0%, 1%, 10%, 14%)
Oklch
oklch(88.1% 0.027 102.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2808E
82F2E5

Analogous

F282C7
F2808E
F2AD82

Triadic

F2808E
8FF282
828FF2

Split-Comp.

F2808E
82F2AD
82C7F2

Tetradic

F2808E
C7F282
82F2E5
AD82F2

Contrast Matrix WCAG 2.1 Contrast

F2808E
9E7B4A
D4AC4E
82C49D
DBD9C5
—
1.5
Fail
1.2
Fail
1.3
Fail
1.8
Fail
1.5
Fail
—
1.8
Fail
1.9
Fail
2.7
Fail
1.2
Fail
1.8
Fail
—
1.1
Fail
1.5
Fail
1.3
Fail
1.9
Fail
1.1
Fail
—
1.4
Fail
1.8
Fail
2.7
Fail
1.5
Fail
1.4
Fail
—
White BG
2.5Fail
3.9AA Large
2.1Fail
2.0Fail
1.4Fail
Black BG
8.3AAA
5.4AA
9.8AAA
10.3AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C08B
8F8F56
C3C265
9F9FA6
DADACA

Deuteranopia

C7D08A
919459
C5C86A
9B96A9
DADACB

Tritanopia

EC8887
9C5F61
D2777B
85AEB0
DBCECF

Achromatopsia

A4A4A4
808080
ADADAD
ACACAC
D7D7D7

Shades & Tints Shades & Tints

#F2808E

Dark
Light

#9E7B4A

Dark
Light

#D4AC4E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2808e;
  --color-2: #9e7b4a;
  --color-3: #d4ac4e;
  --color-4: #82c49d;
  --color-5: #dbd9c5;
}

SCSS

$color-1: #f2808e;
$color-2: #9e7b4a;
$color-3: #d4ac4e;
$color-4: #82c49d;
$color-5: #dbd9c5;

TAILWIND

colors: {
  'brand-1': '#f2808e',
  'brand-2': '#9e7b4a',
  'brand-3': '#d4ac4e',
  'brand-4': '#82c49d',
  'brand-5': '#dbd9c5',
}

RGB Array

[242, 128, 142], [158, 123, 74], [212, 172, 78], [130, 196, 157], [219, 217, 197]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #F2808E, #9E7B4A, #D4AC4E, #82C49D, #DBD9C5 is ideal for: corporate websites, product showcases, portfolios. 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: #f2808e; --color-2: #9e7b4a; --color-3: #d4ac4e; --color-4: #82c49d; --color-5: #dbd9c5. 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. 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