#8EB1A2 + #A2C4B0 + #FEBF3A + #CAD07F + #F6E59B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#8EB1A2

Jade · DarkSeaGreen · Apple Green

HEX

#8EB1A2

RGB

rgb(142, 177, 162)

HSL

hsl(154, 18%, 63%)

HSB

hsb(154, 20%, 69%)

CMYK

cmyk(20%, 0%, 8%, 31%)

Oklch

oklch(73.0% 0.044 167.2)

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

#A2C4B0

Celadon · DarkGray · Apple Green

HEX

#A2C4B0

RGB

rgb(162, 196, 176)

HSL

hsl(145, 22%, 70%)

HSB

hsb(145, 17%, 77%)

CMYK

cmyk(17%, 0%, 10%, 23%)

Oklch

oklch(79.0% 0.046 159.3)

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

#FEBF3A

Ginger · SandyBrown · Sunflower

HEX

#FEBF3A

RGB

rgb(254, 191, 58)

HSL

hsl(41, 99%, 61%)

HSB

hsb(41, 77%, 100%)

CMYK

cmyk(0%, 25%, 77%, 0%)

Oklch

oklch(84.1% 0.157 81.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#CAD07F

Fresh Green · Tan · Sunflower

HEX

#CAD07F

RGB

rgb(202, 208, 127)

HSL

hsl(64, 46%, 66%)

HSB

hsb(64, 39%, 82%)

CMYK

cmyk(3%, 0%, 39%, 18%)

Oklch

oklch(83.5% 0.104 112.1)

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

#F6E59B

Goose Yellow · Khaki · Lemon Cream

HEX

#F6E59B

RGB

rgb(246, 229, 155)

HSL

hsl(49, 83%, 79%)

HSB

hsb(49, 37%, 96%)

CMYK

cmyk(0%, 7%, 37%, 4%)

Oklch

oklch(91.9% 0.095 96.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EB1A2

B2909E

Analogous

90B292

8EB1A2

90AFB2

Triadic

8EB1A2

A390B2

B2A390

Split-Comp.

8EB1A2

B290AF

B29290

Tetradic

8EB1A2

9290B2

B2909E

AFB290

Contrast Matrix WCAG 2.1 Contrast

8EB1A2	A2C4B0	FEBF3A	CAD07F	F6E59B
—	1.2 Fail	1.4 Fail	1.4 Fail	1.9 Fail
1.2 Fail	—	1.2 Fail	1.2 Fail	1.5 Fail
1.4 Fail	1.2 Fail	—	1.0 Fail	1.3 Fail
1.4 Fail	1.2 Fail	1.0 Fail	—	1.3 Fail
1.9 Fail	1.5 Fail	1.3 Fail	1.3 Fail	—

White BG

2.3Fail

1.9Fail

1.6Fail

1.3Fail

Black BG

9.0AAA

11.1AAA

12.7AAA

12.8AAA

16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9DA6

B1B1B5

E3E25A

CDCD93

EFEEAD

Deuteranopia

9B99A7

AFACB6

E6EB62

CCCC97

F0F1B1

Tritanopia

90A8A9

A4B9BA

FB7479

CAA2A5

F5BBBE

Achromatopsia

A5A5A5

B8B8B8

C3C3C3

C5C5C5

E2E2E2

Shades & Tints Shades & Tints

#8EB1A2

Dark

Light

#A2C4B0

Dark

Light

#FEBF3A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8eb1a2;
  --color-2: #a2c4b0;
  --color-3: #febf3a;
  --color-4: #cad07f;
  --color-5: #f6e59b;
}

SCSS

$color-1: #8eb1a2;
$color-2: #a2c4b0;
$color-3: #febf3a;
$color-4: #cad07f;
$color-5: #f6e59b;

TAILWIND

colors: {
  'brand-1': '#8eb1a2',
  'brand-2': '#a2c4b0',
  'brand-3': '#febf3a',
  'brand-4': '#cad07f',
  'brand-5': '#f6e59b',
}

RGB Array

[142, 177, 162], [162, 196, 176], [254, 191, 58], [202, 208, 127], [246, 229, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #8EB1A2, #A2C4B0, #FEBF3A, #CAD07F, #F6E59B is ideal for: health products, baby brands, fresh-style blogs. 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: #8eb1a2; --color-2: #a2c4b0; --color-3: #febf3a; --color-4: #cad07f; --color-5: #f6e59b. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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