← Back to Editor

#F9CF2C · #E4DEB0 · #BBCCAE · #AC9587 · #AF617D

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 Library

Color Details Color Details

#F9CF2C

Ginger · Gold · Sunflower

HEX
#F9CF2C
RGB
rgb(249, 207, 44)
HSL
hsl(48, 94%, 57%)
HSB
hsb(48, 82%, 98%)
CMYK
cmyk(0%, 17%, 82%, 2%)
Oklch
oklch(86.6% 0.168 93.0)

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

#E4DEB0

Fresh Green · Wheat · Lemon Cream

HEX
#E4DEB0
RGB
rgb(228, 222, 176)
HSL
hsl(53, 49%, 79%)
HSB
hsb(53, 23%, 89%)
CMYK
cmyk(0%, 3%, 23%, 11%)
Oklch
oklch(89.4% 0.061 101.3)

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

#BBCCAE

Celadon · Silver · Apple Green

HEX
#BBCCAE
RGB
rgb(187, 204, 174)
HSL
hsl(94, 23%, 74%)
HSB
hsb(94, 15%, 80%)
CMYK
cmyk(8%, 0%, 15%, 20%)
Oklch
oklch(82.4% 0.045 131.6)

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

#AC9587

Tangerine · DarkGray · Warm Sun

HEX
#AC9587
RGB
rgb(172, 149, 135)
HSL
hsl(23, 18%, 60%)
HSB
hsb(23, 22%, 67%)
CMYK
cmyk(0%, 13%, 22%, 33%)
Oklch
oklch(68.6% 0.034 53.3)

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

#AF617D

Dark Violet · Gray · Rose Pink

HEX
#AF617D
RGB
rgb(175, 97, 125)
HSL
hsl(338, 33%, 53%)
HSB
hsb(338, 45%, 69%)
CMYK
cmyk(0%, 45%, 29%, 31%)
Oklch
oklch(59.0% 0.106 357.9)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9CF2C
2A54F8

Analogous

F8682A
F9CF2C
BBF82A

Triadic

F9CF2C
2AF8CF
CF2AF8

Split-Comp.

F9CF2C
2ABBF8
682AF8

Tetradic

F9CF2C
2AF868
2A54F8
F82ABB

Contrast Matrix WCAG 2.1 Contrast

F9CF2C
E4DEB0
BBCCAE
AC9587
AF617D
—
1.1
Fail
1.1
Fail
1.9
Fail
2.9
Fail
1.1
Fail
—
1.2
Fail
2.1
Fail
3.2
AA Large
1.1
Fail
1.2
Fail
—
1.7
Fail
2.6
Fail
1.9
Fail
2.1
Fail
1.7
Fail
—
1.5
Fail
2.9
Fail
3.2
AA Large
2.6
Fail
1.5
Fail
—
White BG
1.5Fail
1.4Fail
1.7Fail
2.8Fail
4.3AA Large
Black BG
14.0AAA
15.4AAA
12.4AAA
7.4AAA
4.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E653
E1E1BB
C2C3B5
A2A28A
8D8D76

Deuteranopia

E9EC5D
E2E2BE
C1C0B7
A3A58B
929875

Tritanopia

F77379
E4C4C6
BCBBBC
AB8D8E
AB7170

Achromatopsia

C9C9C9
DBDBDB
C3C3C3
9A9A9A
7C7C7C

Shades & Tints Shades & Tints

#F9CF2C

Dark
Light

#E4DEB0

Dark
Light

#BBCCAE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9cf2c;
  --color-2: #e4deb0;
  --color-3: #bbccae;
  --color-4: #ac9587;
  --color-5: #af617d;
}

SCSS

$color-1: #f9cf2c;
$color-2: #e4deb0;
$color-3: #bbccae;
$color-4: #ac9587;
$color-5: #af617d;

TAILWIND

colors: {
  'brand-1': '#f9cf2c',
  'brand-2': '#e4deb0',
  'brand-3': '#bbccae',
  'brand-4': '#ac9587',
  'brand-5': '#af617d',
}

RGB Array

[249, 207, 44], [228, 222, 176], [187, 204, 174], [172, 149, 135], [175, 97, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F9CF2C, #E4DEB0, #BBCCAE, #AC9587, #AF617D 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: #f9cf2c; --color-2: #e4deb0; --color-3: #bbccae; --color-4: #ac9587; --color-5: #af617d. 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 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