← Back to Editor

#FEF698 · #D7E6B4 · #61E4C6 · #63BAA9 · #3C878D

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

#FEF698

Fresh Green · Khaki · Lemon Cream

HEX
#FEF698
RGB
rgb(254, 246, 152)
HSL
hsl(55, 98%, 80%)
HSB
hsb(55, 40%, 100%)
CMYK
cmyk(0%, 3%, 40%, 0%)
Oklch
oklch(95.9% 0.116 104.1)

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

#D7E6B4

Willow Green · Wheat · Apple Green

HEX
#D7E6B4
RGB
rgb(215, 230, 180)
HSL
hsl(78, 50%, 80%)
HSB
hsb(78, 22%, 90%)
CMYK
cmyk(7%, 0%, 22%, 10%)
Oklch
oklch(90.1% 0.068 121.3)

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

#61E4C6

Jade · MediumTurquoise · Lake Green

HEX
#61E4C6
RGB
rgb(97, 228, 198)
HSL
hsl(166, 71%, 64%)
HSB
hsb(166, 57%, 89%)
CMYK
cmyk(57%, 0%, 13%, 11%)
Oklch
oklch(83.8% 0.124 175.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#63BAA9

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#63BAA9
RGB
rgb(99, 186, 169)
HSL
hsl(168, 39%, 56%)
HSB
hsb(168, 47%, 73%)
CMYK
cmyk(47%, 0%, 9%, 27%)
Oklch
oklch(73.0% 0.088 179.5)

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

#3C878D

Slate Blue · SteelBlue · Mint Ice

HEX
#3C878D
RGB
rgb(60, 135, 141)
HSL
hsl(184, 40%, 39%)
HSB
hsb(184, 57%, 55%)
CMYK
cmyk(57%, 4%, 0%, 45%)
Oklch
oklch(57.9% 0.074 202.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FEF698
9AA2FE

Analogous

FEC49A
FEF698
D4FE9A

Triadic

FEF698
9AFEF6
F69AFE

Split-Comp.

FEF698
9AD4FE
C49AFE

Tetradic

FEF698
9AFEC4
9AA2FE
FE9AD4

Contrast Matrix WCAG 2.1 Contrast

FEF698
D7E6B4
61E4C6
63BAA9
3C878D
—
1.2
Fail
1.4
Fail
2.1
Fail
3.7
AA Large
1.2
Fail
—
1.2
Fail
1.7
Fail
3.1
AA Large
1.4
Fail
1.2
Fail
—
1.5
Fail
2.7
Fail
2.1
Fail
1.7
Fail
1.5
Fail
—
1.8
Fail
3.7
AA Large
3.1
AA Large
2.7
Fail
1.8
Fail
—
White BG
1.1Fail
1.3Fail
1.6Fail
2.3Fail
4.2AA Large
Black BG
18.8AAA
15.9AAA
13.4AAA
9.1AAA
5.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FBFAAF
DDDEC0
9A9BCD
8989AD
5C5D8C

Deuteranopia

FBFCB4
DDDCC3
9288CF
847DAE
58538B

Tritanopia

FEC1C5
D8CACC
68D3D4
67B0B1
408A8A

Achromatopsia

EEEEEE
DCDCDC
B9B9B9
9E9E9E
717171

Shades & Tints Shades & Tints

#FEF698

Dark
Light

#D7E6B4

Dark
Light

#61E4C6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fef698;
  --color-2: #d7e6b4;
  --color-3: #61e4c6;
  --color-4: #63baa9;
  --color-5: #3c878d;
}

SCSS

$color-1: #fef698;
$color-2: #d7e6b4;
$color-3: #61e4c6;
$color-4: #63baa9;
$color-5: #3c878d;

TAILWIND

colors: {
  'brand-1': '#fef698',
  'brand-2': '#d7e6b4',
  'brand-3': '#61e4c6',
  'brand-4': '#63baa9',
  'brand-5': '#3c878d',
}

RGB Array

[254, 246, 152], [215, 230, 180], [97, 228, 198], [99, 186, 169], [60, 135, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FEF698, #D7E6B4, #61E4C6, #63BAA9, #3C878D 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: #fef698; --color-2: #d7e6b4; --color-3: #61e4c6; --color-4: #63baa9; --color-5: #3c878d. 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