← Back to Editor

#FFED63 · #D4E376 · #8DC286 · #9A7F64 · #AB3C56

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

#FFED63

Fresh Green · Khaki · Sunflower

HEX
#FFED63
RGB
rgb(255, 237, 99)
HSL
hsl(53, 100%, 69%)
HSB
hsb(53, 61%, 100%)
CMYK
cmyk(0%, 7%, 61%, 0%)
Oklch
oklch(93.5% 0.157 101.9)

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

#D4E376

Fresh Green · Khaki · Sunflower

HEX
#D4E376
RGB
rgb(212, 227, 118)
HSL
hsl(68, 66%, 68%)
HSB
hsb(68, 48%, 89%)
CMYK
cmyk(7%, 0%, 48%, 11%)
Oklch
oklch(88.2% 0.135 115.7)

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

#8DC286

Celadon · DarkSeaGreen · Apple Green

HEX
#8DC286
RGB
rgb(141, 194, 134)
HSL
hsl(113, 33%, 64%)
HSB
hsb(113, 31%, 76%)
CMYK
cmyk(27%, 0%, 31%, 24%)
Oklch
oklch(76.2% 0.101 141.7)

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

#9A7F64

Ochre · Gray · Amber Brown

HEX
#9A7F64
RGB
rgb(154, 127, 100)
HSL
hsl(30, 21%, 50%)
HSB
hsb(30, 35%, 60%)
CMYK
cmyk(0%, 18%, 35%, 40%)
Oklch
oklch(61.5% 0.051 66.6)

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

#AB3C56

Crimson · Sienna · Passion Red

HEX
#AB3C56
RGB
rgb(171, 60, 86)
HSL
hsl(346, 48%, 45%)
HSB
hsb(346, 65%, 67%)
CMYK
cmyk(0%, 65%, 50%, 33%)
Oklch
oklch(51.9% 0.146 9.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFED63
6173FF

Analogous

FF9E61
FFED63
C2FF61

Triadic

FFED63
61FFED
ED61FF

Split-Comp.

FFED63
61C2FF
9E61FF

Tetradic

FFED63
61FF9E
6173FF
FF61C2

Contrast Matrix WCAG 2.1 Contrast

FFED63
D4E376
8DC286
9A7F64
AB3C56
—
1.2
Fail
1.7
Fail
3.1
AA Large
5.0
AA
1.2
Fail
—
1.5
Fail
2.7
Fail
4.3
AA Large
1.7
Fail
1.5
Fail
—
1.8
Fail
2.9
Fail
3.1
AA Large
2.7
Fail
1.8
Fail
—
1.6
Fail
5.0
AA
4.3
AA Large
2.9
Fail
1.6
Fail
—
White BG
1.2Fail
1.4Fail
2.1Fail
3.8AA Large
6.0AA
Black BG
17.5AAA
15.0AAA
10.2AAA
5.6AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

F7F784
DADB90
A4A495
8E8E6B
7B7A50

Deuteranopia

F8FA8C
DAD897
A19D98
90926C
818A4E

Tritanopia

FE9FA5
D5A5AA
90A0A3
997071
A54B4A

Achromatopsia

E3E3E3
D2D2D2
ABABAB
848484
606060

Shades & Tints Shades & Tints

#FFED63

Dark
Light

#D4E376

Dark
Light

#8DC286

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffed63;
  --color-2: #d4e376;
  --color-3: #8dc286;
  --color-4: #9a7f64;
  --color-5: #ab3c56;
}

SCSS

$color-1: #ffed63;
$color-2: #d4e376;
$color-3: #8dc286;
$color-4: #9a7f64;
$color-5: #ab3c56;

TAILWIND

colors: {
  'brand-1': '#ffed63',
  'brand-2': '#d4e376',
  'brand-3': '#8dc286',
  'brand-4': '#9a7f64',
  'brand-5': '#ab3c56',
}

RGB Array

[255, 237, 99], [212, 227, 118], [141, 194, 134], [154, 127, 100], [171, 60, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFED63, #D4E376, #8DC286, #9A7F64, #AB3C56 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: #ffed63; --color-2: #d4e376; --color-3: #8dc286; --color-4: #9a7f64; --color-5: #ab3c56. 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