#CCF04D + #2F6665 + #BAC694 + #91CCB3 + #5E8A73 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#CCF04D

Willow Green · GreenYellow · Apple Green

HEX

#CCF04D

RGB

rgb(204, 240, 77)

HSL

hsl(73, 84%, 62%)

HSB

hsb(73, 68%, 94%)

CMYK

cmyk(15%, 0%, 68%, 6%)

Oklch

oklch(90.0% 0.187 121.1)

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

#2F6665

Mineral Blue · DarkSlateGray · Mint Ice

HEX

#2F6665

RGB

rgb(47, 102, 101)

HSL

hsl(179, 37%, 29%)

HSB

hsb(179, 54%, 40%)

CMYK

cmyk(54%, 0%, 1%, 60%)

Oklch

oklch(47.3% 0.058 193.8)

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

#BAC694

Willow Green · Tan · Apple Green

HEX

#BAC694

RGB

rgb(186, 198, 148)

HSL

hsl(74, 30%, 68%)

HSB

hsb(74, 25%, 78%)

CMYK

cmyk(6%, 0%, 25%, 22%)

Oklch

oklch(80.5% 0.069 118.9)

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

#91CCB3

Jade · DarkSeaGreen · Apple Green

HEX

#91CCB3

RGB

rgb(145, 204, 179)

HSL

hsl(155, 37%, 68%)

HSB

hsb(155, 29%, 80%)

CMYK

cmyk(29%, 0%, 12%, 20%)

Oklch

oklch(79.8% 0.071 166.5)

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

#5E8A73

Celadon · SlateGray · Olive Green

HEX

#5E8A73

RGB

rgb(94, 138, 115)

HSL

hsl(149, 19%, 45%)

HSB

hsb(149, 32%, 54%)

CMYK

cmyk(32%, 0%, 17%, 46%)

Oklch

oklch(59.4% 0.060 161.1)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCF04D

704DEF

Analogous

EFC14D

CCF04D

7BEF4D

Triadic

CCF04D

4DCCEF

EF4DCC

Split-Comp.

CCF04D

4D7BEF

C14DEF

Tetradic

CCF04D

4DEFC1

704DEF

EF4D7B

Contrast Matrix WCAG 2.1 Contrast

CCF04D	2F6665	BAC694	91CCB3	5E8A73
—	5.0 AA	1.4 Fail	1.4 Fail	3.0 AA Large
5.0 AA	—	3.6 AA Large	3.6 AA Large	1.7 Fail
1.4 Fail	3.6 AA Large	—	1.0 Fail	2.2 Fail
1.4 Fail	3.6 AA Large	1.0 Fail	—	2.1 Fail
3.0 AA Large	1.7 Fail	2.2 Fail	2.1 Fail	—

White BG

1.3Fail

6.5AA

1.8Fail

3.9AA Large

Black BG

16.1AAA

3.2AA Large

11.6AAA

11.5AAA

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDC74

474765

BFBFA0

ABABB9

717179

Deuteranopia

DAD77E

444065

BFBEA3

A7A3BB

6F6B7A

Tritanopia

CE949A

326565

BBAAAC

94BEBF

607D7E

Achromatopsia

D3D3D3

555555

BDBDBD

B8B8B8

7A7A7A

Shades & Tints Shades & Tints

#CCF04D

Dark

Light

#2F6665

Dark

Light

#BAC694

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ccf04d;
  --color-2: #2f6665;
  --color-3: #bac694;
  --color-4: #91ccb3;
  --color-5: #5e8a73;
}

SCSS

$color-1: #ccf04d;
$color-2: #2f6665;
$color-3: #bac694;
$color-4: #91ccb3;
$color-5: #5e8a73;

TAILWIND

colors: {
  'brand-1': '#ccf04d',
  'brand-2': '#2f6665',
  'brand-3': '#bac694',
  'brand-4': '#91ccb3',
  'brand-5': '#5e8a73',
}

RGB Array

[204, 240, 77], [47, 102, 101], [186, 198, 148], [145, 204, 179], [94, 138, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CCF04D, #2F6665, #BAC694, #91CCB3, #5E8A73 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: #ccf04d; --color-2: #2f6665; --color-3: #bac694; --color-4: #91ccb3; --color-5: #5e8a73. 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