#F0E363 + #CFE29A + #8FD4AD + #2FADBC + #6D6D7A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F0E363

Fresh Green · Khaki · Sunflower

HEX

#F0E363

RGB

rgb(240, 227, 99)

HSL

hsl(54, 82%, 66%)

HSB

hsb(54, 59%, 94%)

CMYK

cmyk(0%, 5%, 59%, 6%)

Oklch

oklch(90.2% 0.148 103.5)

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

#CFE29A

Willow Green · Khaki · Apple Green

HEX

#CFE29A

RGB

rgb(207, 226, 154)

HSL

hsl(76, 55%, 75%)

HSB

hsb(76, 32%, 89%)

CMYK

cmyk(8%, 0%, 32%, 11%)

Oklch

oklch(88.2% 0.096 120.4)

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

#8FD4AD

Celadon · DarkSeaGreen · Apple Green

HEX

#8FD4AD

RGB

rgb(143, 212, 173)

HSL

hsl(146, 45%, 70%)

HSB

hsb(146, 33%, 83%)

CMYK

cmyk(33%, 0%, 18%, 17%)

Oklch

oklch(81.3% 0.089 158.9)

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

#2FADBC

Lake Blue · LightSeaGreen · Mint Ice

HEX

#2FADBC

RGB

rgb(47, 173, 188)

HSL

hsl(186, 60%, 46%)

HSB

hsb(186, 75%, 74%)

CMYK

cmyk(75%, 8%, 0%, 26%)

Oklch

oklch(68.8% 0.107 206.9)

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

#6D6D7A

Ink Gray · DimGray · Warm Gray

HEX

#6D6D7A

RGB

rgb(109, 109, 122)

HSL

hsl(240, 6%, 45%)

HSB

hsb(240, 11%, 48%)

CMYK

cmyk(11%, 11%, 0%, 52%)

Oklch

oklch(53.9% 0.020 285.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0E363

616FEF

Analogous

EF9A61

F0E363

B7EF61

Triadic

F0E363

61EFE1

E161EF

Split-Comp.

F0E363

61B7EF

9A61EF

Tetradic

F0E363

61EF9A

616FEF

EF61B7

Contrast Matrix WCAG 2.1 Contrast

F0E363	CFE29A	8FD4AD	2FADBC	6D6D7A
—	1.1 Fail	1.3 Fail	2.0 Fail	3.9 AA Large
1.1 Fail	—	1.2 Fail	1.9 Fail	3.6 AA Large
1.3 Fail	1.2 Fail	—	1.6 Fail	3.0 Fail
2.0 Fail	1.9 Fail	1.6 Fail	—	1.9 Fail
3.9 AA Large	3.6 AA Large	3.0 Fail	1.9 Fail	—

White BG

1.3Fail

1.4Fail

1.7Fail

2.7Fail

5.1AA

Black BG

15.9AAA

15.0AAA

12.2AAA

7.8AAA

4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EAEA82

D7D7AB

ADADB6

6667B8

6D6D77

Deuteranopia

EBEC89

D6D5B0

A9A4B9

5E55B8

6D6D76

Tritanopia

EF9AA0

D0B9BC

92BEC0

35B6B5

6D7474

Achromatopsia

D8D8D8

D4D4D4

BBBBBB

898989

6E6E6E

Shades & Tints Shades & Tints

#F0E363

Dark

Light

#CFE29A

Dark

Light

#8FD4AD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0e363;
  --color-2: #cfe29a;
  --color-3: #8fd4ad;
  --color-4: #2fadbc;
  --color-5: #6d6d7a;
}

SCSS

$color-1: #f0e363;
$color-2: #cfe29a;
$color-3: #8fd4ad;
$color-4: #2fadbc;
$color-5: #6d6d7a;

TAILWIND

colors: {
  'brand-1': '#f0e363',
  'brand-2': '#cfe29a',
  'brand-3': '#8fd4ad',
  'brand-4': '#2fadbc',
  'brand-5': '#6d6d7a',
}

RGB Array

[240, 227, 99], [207, 226, 154], [143, 212, 173], [47, 173, 188], [109, 109, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0E363, #CFE29A, #8FD4AD, #2FADBC, #6D6D7A 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: #f0e363; --color-2: #cfe29a; --color-3: #8fd4ad; --color-4: #2fadbc; --color-5: #6d6d7a. 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