← Back to Editor

#FFF9E8 · #FFB1A3 · #D9725F · #302A29 · #9E89A3

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFF9E8

Goose Yellow · SeaShell · Lemon Cream

HEX
#FFF9E8
RGB
rgb(255, 249, 232)
HSL
hsl(44, 100%, 95%)
HSB
hsb(44, 9%, 100%)
CMYK
cmyk(0%, 2%, 9%, 0%)
Oklch
oklch(98.2% 0.023 90.7)

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

#FFB1A3

Peach Pink · LightPink · Cherry Blossom

HEX
#FFB1A3
RGB
rgb(255, 177, 163)
HSL
hsl(9, 100%, 82%)
HSB
hsb(9, 36%, 100%)
CMYK
cmyk(0%, 31%, 36%, 0%)
Oklch
oklch(83.1% 0.094 30.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#D9725F

Peach Pink · Salmon · Coral Red

HEX
#D9725F
RGB
rgb(217, 114, 95)
HSL
hsl(9, 62%, 61%)
HSB
hsb(9, 56%, 85%)
CMYK
cmyk(0%, 47%, 56%, 15%)
Oklch
oklch(66.6% 0.133 31.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#302A29

Crimson · DarkSlateGray · Dark Stone

HEX
#302A29
RGB
rgb(48, 42, 41)
HSL
hsl(9, 8%, 17%)
HSB
hsb(9, 15%, 19%)
CMYK
cmyk(0%, 13%, 15%, 81%)
Oklch
oklch(29.1% 0.009 29.0)

Traditional「Crimson」· Paint「Dark Stone」· Creative Midnight Shadow

#9E89A3

Dark Plum · DarkGray · Violet

HEX
#9E89A3
RGB
rgb(158, 137, 163)
HSL
hsl(288, 12%, 59%)
HSB
hsb(288, 16%, 64%)
CMYK
cmyk(3%, 16%, 0%, 36%)
Oklch
oklch(65.8% 0.045 319.7)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF9E8
E5ECFF

Analogous

FFEBE5
FFF9E8
F9FFE5

Triadic

FFF9E8
E5FFF8
F8E5FF

Split-Comp.

FFF9E8
E5F9FF
EBE5FF

Tetradic

FFF9E8
E5FFEB
E5ECFF
FFE5F9

Contrast Matrix WCAG 2.1 Contrast

FFF9E8
FFB1A3
D9725F
302A29
9E89A3
—
1.7
Fail
3.1
AA Large
13.4
AAA
3.0
AA Large
1.7
Fail
—
1.9
Fail
8.1
AAA
1.8
Fail
3.1
AA Large
1.9
Fail
—
4.4
AA Large
1.0
Fail
13.4
AAA
8.1
AAA
4.4
AA Large
—
4.4
AA Large
3.0
AA Large
1.8
Fail
1.0
Fail
4.4
AA Large
—
White BG
1.1Fail
1.7Fail
3.2AA Large
14.1AAA
3.2AA Large
Black BG
20.0AAA
12.1AAA
6.5AA
1.5Fail
6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCEC
DDDDA6
ACAB64
2D2D29
95959D

Deuteranopia

FDFDED
E2E8A7
B2BA65
2E2E29
96989B

Tritanopia

FFEFF0
FBA9AA
D46768
302929
9D9897

Achromatopsia

F9F9F9
C7C7C7
8F8F8F
2C2C2C
929292

Shades & Tints Shades & Tints

#FFF9E8

Dark
Light

#FFB1A3

Dark
Light

#D9725F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff9e8;
  --color-2: #ffb1a3;
  --color-3: #d9725f;
  --color-4: #302a29;
  --color-5: #9e89a3;
}

SCSS

$color-1: #fff9e8;
$color-2: #ffb1a3;
$color-3: #d9725f;
$color-4: #302a29;
$color-5: #9e89a3;

TAILWIND

colors: {
  'brand-1': '#fff9e8',
  'brand-2': '#ffb1a3',
  'brand-3': '#d9725f',
  'brand-4': '#302a29',
  'brand-5': '#9e89a3',
}

RGB Array

[255, 249, 232], [255, 177, 163], [217, 114, 95], [48, 42, 41], [158, 137, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF9E8, #FFB1A3, #D9725F, #302A29, #9E89A3 is ideal for: 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: #fff9e8; --color-2: #ffb1a3; --color-3: #d9725f; --color-4: #302a29; --color-5: #9e89a3. 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 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