#4B505E + #AFB3A1 + #BAC295 + #CAE65C + #CEFA20 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#4B505E

Indigo · DarkSlateGray · Prussian Blue

HEX

#4B505E

RGB

rgb(75, 80, 94)

HSL

hsl(224, 11%, 33%)

HSB

hsb(224, 20%, 37%)

CMYK

cmyk(20%, 15%, 0%, 63%)

Oklch

oklch(43.2% 0.024 269.8)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#AFB3A1

Willow Green · DarkGray · Apple Green

HEX

#AFB3A1

RGB

rgb(175, 179, 161)

HSL

hsl(73, 11%, 67%)

HSB

hsb(73, 10%, 70%)

CMYK

cmyk(2%, 0%, 10%, 30%)

Oklch

oklch(75.8% 0.026 117.2)

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

#BAC295

Willow Green · Tan · Apple Green

HEX

#BAC295

RGB

rgb(186, 194, 149)

HSL

hsl(71, 27%, 67%)

HSB

hsb(71, 23%, 76%)

CMYK

cmyk(4%, 0%, 23%, 24%)

Oklch

oklch(79.6% 0.062 116.0)

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

#CAE65C

Willow Green · GreenYellow · Apple Green

HEX

#CAE65C

RGB

rgb(202, 230, 92)

HSL

hsl(72, 73%, 63%)

HSB

hsb(72, 60%, 90%)

CMYK

cmyk(12%, 0%, 60%, 10%)

Oklch

oklch(87.8% 0.165 119.6)

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

#CEFA20

Grass Green · GreenYellow · Olive Green

HEX

#CEFA20

RGB

rgb(206, 250, 32)

HSL

hsl(72, 96%, 55%)

HSB

hsb(72, 87%, 98%)

CMYK

cmyk(18%, 0%, 87%, 2%)

Oklch

oklch(92.1% 0.218 121.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4B505E

5D584B

Analogous

4B595D

4B505E

4F4B5D

Triadic

4B505E

5D4B50

505D4B

Split-Comp.

4B505E

5D4F4B

595D4B

Tetradic

4B505E

5D4B59

5D584B

4B5D4F

Contrast Matrix WCAG 2.1 Contrast

4B505E	AFB3A1	BAC295	CAE65C	CEFA20
—	3.8 AA Large	4.3 AA Large	5.7 AA	6.6 AA
3.8 AA Large	—	1.1 Fail	1.5 Fail	1.8 Fail
4.3 AA Large	1.1 Fail	—	1.3 Fail	1.5 Fail
5.7 AA	1.5 Fail	1.3 Fail	—	1.2 Fail
6.6 AA	1.8 Fail	1.5 Fail	1.2 Fail	—

White BG

8.1AAA

2.1Fail

1.9Fail

1.4Fail

1.2Fail

Black BG

2.6Fail

9.8AAA

11.2AAA

15.0AAA

17.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4D4D5B

B1B1A5

BDBEA0

D6D67D

E1E155

Deuteranopia

4D4D5A

B1B0A6

BDBCA3

D5D285

DFDB61

Tritanopia

4B5857

AFA9AA

BAA8AA

CB989E

D07E88

Achromatopsia

505050

B0B0B0

BABABA

CECECE

D4D4D4

Shades & Tints Shades & Tints

#4B505E

Dark

Light

#AFB3A1

Dark

Light

#BAC295

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4b505e;
  --color-2: #afb3a1;
  --color-3: #bac295;
  --color-4: #cae65c;
  --color-5: #cefa20;
}

SCSS

$color-1: #4b505e;
$color-2: #afb3a1;
$color-3: #bac295;
$color-4: #cae65c;
$color-5: #cefa20;

TAILWIND

colors: {
  'brand-1': '#4b505e',
  'brand-2': '#afb3a1',
  'brand-3': '#bac295',
  'brand-4': '#cae65c',
  'brand-5': '#cefa20',
}

RGB Array

[75, 80, 94], [175, 179, 161], [186, 194, 149], [202, 230, 92], [206, 250, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4B505E, #AFB3A1, #BAC295, #CAE65C, #CEFA20 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: #4b505e; --color-2: #afb3a1; --color-3: #bac295; --color-4: #cae65c; --color-5: #cefa20. 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