← Back to Editor

#FFFBB7 · #A6F6AF · #66B6AB · #5B7C8D · #4F2958

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#FFFBB7

Fresh Green · Bisque · Lemon Cream

HEX
#FFFBB7
RGB
rgb(255, 251, 183)
HSL
hsl(57, 100%, 86%)
HSB
hsb(57, 28%, 100%)
CMYK
cmyk(0%, 2%, 28%, 0%)
Oklch
oklch(97.5% 0.086 105.0)

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

#A6F6AF

Emerald · LightGreen · Mint Green

HEX
#A6F6AF
RGB
rgb(166, 246, 175)
HSL
hsl(127, 82%, 81%)
HSB
hsb(127, 33%, 96%)
CMYK
cmyk(33%, 0%, 29%, 4%)
Oklch
oklch(90.3% 0.124 147.2)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

#66B6AB

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#66B6AB
RGB
rgb(102, 182, 171)
HSL
hsl(172, 35%, 56%)
HSB
hsb(172, 44%, 71%)
CMYK
cmyk(44%, 0%, 6%, 29%)
Oklch
oklch(72.2% 0.081 184.2)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#5B7C8D

Slate Blue · SlateGray · Navy Blue

HEX
#5B7C8D
RGB
rgb(91, 124, 141)
HSL
hsl(200, 22%, 45%)
HSB
hsb(200, 35%, 55%)
CMYK
cmyk(35%, 12%, 0%, 45%)
Oklch
oklch(56.8% 0.046 231.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#4F2958

Dark Plum · DarkSlateGray · Eggplant

HEX
#4F2958
RGB
rgb(79, 41, 88)
HSL
hsl(289, 36%, 25%)
HSB
hsb(289, 53%, 35%)
CMYK
cmyk(10%, 53%, 0%, 65%)
Oklch
oklch(35.2% 0.091 319.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFFBB7
B8BBFF

Analogous

FFD8B8
FFFBB7
DFFFB8

Triadic

FFFBB7
B8FFFB
FBB8FF

Split-Comp.

FFFBB7
B8DFFF
D8B8FF

Tetradic

FFFBB7
B8FFD8
B8BBFF
FFB8DF

Contrast Matrix WCAG 2.1 Contrast

FFFBB7
A6F6AF
66B6AB
5B7C8D
4F2958
—
1.2
Fail
2.2
Fail
4.2
AA Large
11.0
AAA
1.2
Fail
—
1.9
Fail
3.5
AA Large
9.2
AAA
2.2
Fail
1.9
Fail
—
1.9
Fail
4.9
AA
4.2
AA Large
3.5
AA Large
1.9
Fail
—
2.6
Fail
11.0
AAA
9.2
AAA
4.9
AA
2.6
Fail
—
White BG
1.1Fail
1.3Fail
2.4Fail
4.5AA Large
11.7AAA
Black BG
19.7AAA
16.4AAA
8.8AAA
4.7AA
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

FDFDC7
C9C9C0
8989AE
696A89
3F3E4D

Deuteranopia

FEFECB
C4BEC4
847EAE
676588
41444A

Tritanopia

FFD4D7
AACED1
6AB0B0
5D8685
4D4442

Achromatopsia

F4F4F4
D6D6D6
9D9D9D
747474
3A3A3A

Shades & Tints Shades & Tints

#FFFBB7

Dark
Light

#A6F6AF

Dark
Light

#66B6AB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fffbb7;
  --color-2: #a6f6af;
  --color-3: #66b6ab;
  --color-4: #5b7c8d;
  --color-5: #4f2958;
}

SCSS

$color-1: #fffbb7;
$color-2: #a6f6af;
$color-3: #66b6ab;
$color-4: #5b7c8d;
$color-5: #4f2958;

TAILWIND

colors: {
  'brand-1': '#fffbb7',
  'brand-2': '#a6f6af',
  'brand-3': '#66b6ab',
  'brand-4': '#5b7c8d',
  'brand-5': '#4f2958',
}

RGB Array

[255, 251, 183], [166, 246, 175], [102, 182, 171], [91, 124, 141], [79, 41, 88]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFFBB7, #A6F6AF, #66B6AB, #5B7C8D, #4F2958 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: #fffbb7; --color-2: #a6f6af; --color-3: #66b6ab; --color-4: #5b7c8d; --color-5: #4f2958. 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