← Back to Editor

#FFF6BF · #9DB488 · #4A284B · #8F5563 · #F0A590

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

#FFF6BF

Fresh Green · Bisque · Lemon Cream

HEX
#FFF6BF
RGB
rgb(255, 246, 191)
HSL
hsl(52, 100%, 87%)
HSB
hsb(52, 25%, 100%)
CMYK
cmyk(0%, 4%, 25%, 0%)
Oklch
oklch(96.7% 0.071 99.8)

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

#9DB488

Celadon · DarkSeaGreen · Apple Green

HEX
#9DB488
RGB
rgb(157, 180, 136)
HSL
hsl(91, 23%, 62%)
HSB
hsb(91, 24%, 71%)
CMYK
cmyk(13%, 0%, 24%, 29%)
Oklch
oklch(74.1% 0.066 130.3)

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

#4A284B

Dark Plum · DarkSlateGray · Eggplant

HEX
#4A284B
RGB
rgb(74, 40, 75)
HSL
hsl(298, 30%, 23%)
HSB
hsb(298, 47%, 29%)
CMYK
cmyk(1%, 47%, 0%, 71%)
Oklch
oklch(33.6% 0.074 326.0)

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

#8F5563

Crimson · DimGray · Passion Red

HEX
#8F5563
RGB
rgb(143, 85, 99)
HSL
hsl(346, 25%, 45%)
HSB
hsb(346, 41%, 56%)
CMYK
cmyk(0%, 41%, 31%, 44%)
Oklch
oklch(52.0% 0.079 4.6)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#F0A590

Peach Pink · LightSalmon · Coral Red

HEX
#F0A590
RGB
rgb(240, 165, 144)
HSL
hsl(13, 76%, 75%)
HSB
hsb(13, 40%, 94%)
CMYK
cmyk(0%, 31%, 40%, 6%)
Oklch
oklch(78.9% 0.094 36.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF6BF
BDC6FF

Analogous

FFD5BD
FFF6BF
E7FFBD

Triadic

FFF6BF
BDFFF6
F6BDFF

Split-Comp.

FFF6BF
BDE7FF
D5BDFF

Tetradic

FFF6BF
BDFFD5
BDC6FF
FFBDE7

Contrast Matrix WCAG 2.1 Contrast

FFF6BF
9DB488
4A284B
8F5563
F0A590
—
2.1
Fail
11.3
AAA
5.3
AA
1.8
Fail
2.1
Fail
—
5.5
AA
2.6
Fail
1.1
Fail
11.3
AAA
5.5
AA
—
2.2
Fail
6.2
AA
5.3
AA
2.6
Fail
2.2
Fail
—
2.9
Fail
1.8
Fail
1.1
Fail
6.2
AA
2.9
Fail
—
White BG
1.1Fail
2.3Fail
12.4AAA
5.8AA
2.0Fail
Black BG
19.2AAA
9.3AAA
1.7Fail
3.6AA Large
10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFBCC
A7A793
3B3B43
767560
D0CF95

Deuteranopia

FCFCD0
A6A495
3D4041
797E5F
D4DA96

Tritanopia

FFD7D9
9E9B9D
483C3A
8C5D5C
EC999A

Achromatopsia

F2F2F2
A8A8A8
363636
686868
B9B9B9

Shades & Tints Shades & Tints

#FFF6BF

Dark
Light

#9DB488

Dark
Light

#4A284B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff6bf;
  --color-2: #9db488;
  --color-3: #4a284b;
  --color-4: #8f5563;
  --color-5: #f0a590;
}

SCSS

$color-1: #fff6bf;
$color-2: #9db488;
$color-3: #4a284b;
$color-4: #8f5563;
$color-5: #f0a590;

TAILWIND

colors: {
  'brand-1': '#fff6bf',
  'brand-2': '#9db488',
  'brand-3': '#4a284b',
  'brand-4': '#8f5563',
  'brand-5': '#f0a590',
}

RGB Array

[255, 246, 191], [157, 180, 136], [74, 40, 75], [143, 85, 99], [240, 165, 144]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF6BF, #9DB488, #4A284B, #8F5563, #F0A590 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: #fff6bf; --color-2: #9db488; --color-3: #4a284b; --color-4: #8f5563; --color-5: #f0a590. 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