#B4D63A + #AFDECD + #648E91 + #92AF82 + #DCEC8E · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B4D63A

Grass Green · GreenYellow · Olive Green

HEX

#B4D63A

RGB

rgb(180, 214, 58)

HSL

hsl(73, 66%, 53%)

HSB

hsb(73, 73%, 84%)

CMYK

cmyk(16%, 0%, 73%, 16%)

Oklch

oklch(82.4% 0.178 121.3)

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

#AFDECD

Jade · LightBlue · Apple Green

HEX

#AFDECD

RGB

rgb(175, 222, 205)

HSL

hsl(158, 42%, 78%)

HSB

hsb(158, 21%, 87%)

CMYK

cmyk(21%, 0%, 8%, 13%)

Oklch

oklch(86.3% 0.054 170.9)

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

#648E91

Slate Blue · SlateGray · Mint Ice

HEX

#648E91

RGB

rgb(100, 142, 145)

HSL

hsl(184, 18%, 48%)

HSB

hsb(184, 31%, 57%)

CMYK

cmyk(31%, 2%, 0%, 43%)

Oklch

oklch(61.7% 0.046 201.6)

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

#92AF82

Celadon · DarkSeaGreen · Olive Green

HEX

#92AF82

RGB

rgb(146, 175, 130)

HSL

hsl(99, 22%, 60%)

HSB

hsb(99, 26%, 69%)

CMYK

cmyk(17%, 0%, 26%, 31%)

Oklch

oklch(72.0% 0.071 134.6)

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

#DCEC8E

Willow Green · Khaki · Apple Green

HEX

#DCEC8E

RGB

rgb(220, 236, 142)

HSL

hsl(70, 71%, 74%)

HSB

hsb(70, 40%, 93%)

CMYK

cmyk(7%, 0%, 40%, 7%)

Oklch

oklch(91.0% 0.119 116.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4D63A

5A38D6

Analogous

D6A938

B4D63A

65D638

Triadic

B4D63A

38B4D6

D638B4

Split-Comp.

B4D63A

3865D6

A938D6

Tetradic

B4D63A

38D6A9

5A38D6

D63865

Contrast Matrix WCAG 2.1 Contrast

B4D63A	AFDECD	648E91	92AF82	DCEC8E
—	1.1 Fail	2.2 Fail	1.5 Fail	1.3 Fail
1.1 Fail	—	2.4 Fail	1.6 Fail	1.2 Fail
2.2 Fail	2.4 Fail	—	1.5 Fail	2.8 Fail
1.5 Fail	1.6 Fail	1.5 Fail	—	1.9 Fail
1.3 Fail	1.2 Fail	2.8 Fail	1.9 Fail	—

White BG

1.7Fail

1.5Fail

3.6AA Large

2.4Fail

1.3Fail

Black BG

12.6AAA

14.2AAA

5.8AA

8.7AAA

16.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C360

C3C4D1

767790

9F9F8D

E3E3A5

Deuteranopia

C1BE69

C1BDD2

747190

9D9B90

E2E1AA

Tritanopia

B67E84

B1D4D5

669090

939597

DDB7BB

Achromatopsia

BABABA

CECECE

828282

A1A1A1

DCDCDC

Shades & Tints Shades & Tints

#B4D63A

Dark

Light

#AFDECD

Dark

Light

#648E91

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4d63a;
  --color-2: #afdecd;
  --color-3: #648e91;
  --color-4: #92af82;
  --color-5: #dcec8e;
}

SCSS

$color-1: #b4d63a;
$color-2: #afdecd;
$color-3: #648e91;
$color-4: #92af82;
$color-5: #dcec8e;

TAILWIND

colors: {
  'brand-1': '#b4d63a',
  'brand-2': '#afdecd',
  'brand-3': '#648e91',
  'brand-4': '#92af82',
  'brand-5': '#dcec8e',
}

RGB Array

[180, 214, 58], [175, 222, 205], [100, 142, 145], [146, 175, 130], [220, 236, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #B4D63A, #AFDECD, #648E91, #92AF82, #DCEC8E 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: #b4d63a; --color-2: #afdecd; --color-3: #648e91; --color-4: #92af82; --color-5: #dcec8e. 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 sunset-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