← Back to Editor

#8EC1AE · #ADC7A4 · #CACA8E · #EBC77B · #FFC500

pastel

A 5-color pastel palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#8EC1AE

Jade · DarkSeaGreen · Apple Green

HEX
#8EC1AE
RGB
rgb(142, 193, 174)
HSL
hsl(158, 29%, 66%)
HSB
hsb(158, 26%, 76%)
CMYK
cmyk(26%, 0%, 10%, 24%)
Oklch
oklch(77.0% 0.060 169.7)

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

#ADC7A4

Celadon · DarkGray · Apple Green

HEX
#ADC7A4
RGB
rgb(173, 199, 164)
HSL
hsl(105, 24%, 71%)
HSB
hsb(105, 18%, 78%)
CMYK
cmyk(13%, 0%, 18%, 22%)
Oklch
oklch(80.1% 0.056 137.7)

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

#CACA8E

Fresh Green · Tan · Sunflower

HEX
#CACA8E
RGB
rgb(202, 202, 142)
HSL
hsl(60, 36%, 67%)
HSB
hsb(60, 30%, 79%)
CMYK
cmyk(0%, 0%, 30%, 21%)
Oklch
oklch(82.5% 0.079 108.0)

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

#EBC77B

Ginger · BurlyWood · Sunflower

HEX
#EBC77B
RGB
rgb(235, 199, 123)
HSL
hsl(41, 74%, 70%)
HSB
hsb(41, 48%, 92%)
CMYK
cmyk(0%, 15%, 48%, 8%)
Oklch
oklch(84.4% 0.103 84.9)

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

#FFC500

Ochre · Gold · Honey Gold

HEX
#FFC500
RGB
rgb(255, 197, 0)
HSL
hsl(46, 100%, 50%)
HSB
hsb(46, 100%, 100%)
CMYK
cmyk(0%, 23%, 100%, 0%)
Oklch
oklch(85.2% 0.174 87.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8EC1AE
C18FA2

Analogous

8FC196
8EC1AE
8FBBC1

Triadic

8EC1AE
AF8FC1
C1AF8F

Split-Comp.

8EC1AE
C18FBB
C1968F

Tetradic

8EC1AE
968FC1
C18FA2
BBC18F

Contrast Matrix WCAG 2.1 Contrast

8EC1AE
ADC7A4
CACA8E
EBC77B
FFC500
—
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
White BG
2.0Fail
1.8Fail
1.7Fail
1.6Fail
1.6Fail
Black BG
10.4AAA
11.5AAA
12.4AAA
13.0AAA
13.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A5B3
B8B8AC
CACA9D
DBDB8D
E6E530

Deuteranopia

A19DB4
B7B5AF
CACAA0
DEE092
E9EE3B

Tritanopia

91B6B7
AEB3B5
CAA8AB
E99C9F
FC555E

Achromatopsia

B0B0B0
BBBBBB
C3C3C3
C9C9C9
C0C0C0

Shades & Tints Shades & Tints

#8EC1AE

Dark
Light

#ADC7A4

Dark
Light

#CACA8E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8ec1ae;
  --color-2: #adc7a4;
  --color-3: #caca8e;
  --color-4: #ebc77b;
  --color-5: #ffc500;
}

SCSS

$color-1: #8ec1ae;
$color-2: #adc7a4;
$color-3: #caca8e;
$color-4: #ebc77b;
$color-5: #ffc500;

TAILWIND

colors: {
  'brand-1': '#8ec1ae',
  'brand-2': '#adc7a4',
  'brand-3': '#caca8e',
  'brand-4': '#ebc77b',
  'brand-5': '#ffc500',
}

RGB Array

[142, 193, 174], [173, 199, 164], [202, 202, 142], [235, 199, 123], [255, 197, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #8EC1AE, #ADC7A4, #CACA8E, #EBC77B, #FFC500 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: #8ec1ae; --color-2: #adc7a4; --color-3: #caca8e; --color-4: #ebc77b; --color-5: #ffc500. 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 pastel-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