#485566 + #259EAE + #CDFC43 + #8CDE4B + #576E4A · bright - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#485566

Indigo · DarkSlateGray · Prussian Blue

HEX

#485566

RGB

rgb(72, 85, 102)

HSL

hsl(214, 17%, 34%)

HSB

hsb(214, 29%, 40%)

CMYK

cmyk(29%, 17%, 0%, 60%)

Oklch

oklch(44.5% 0.033 255.2)

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

#259EAE

Lake Blue · LightSeaGreen · Mint Ice

HEX

#259EAE

RGB

rgb(37, 158, 174)

HSL

hsl(187, 65%, 41%)

HSB

hsb(187, 79%, 68%)

CMYK

cmyk(79%, 9%, 0%, 32%)

Oklch

oklch(64.3% 0.102 208.5)

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

#CDFC43

Willow Green · GreenYellow · Apple Green

HEX

#CDFC43

RGB

rgb(205, 252, 67)

HSL

hsl(75, 97%, 63%)

HSB

hsb(75, 73%, 99%)

CMYK

cmyk(19%, 0%, 73%, 1%)

Oklch

oklch(92.7% 0.206 123.2)

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

#8CDE4B

Emerald · GreenYellow · Olive Green

HEX

#8CDE4B

RGB

rgb(140, 222, 75)

HSL

hsl(93, 69%, 58%)

HSB

hsb(93, 66%, 87%)

CMYK

cmyk(37%, 0%, 66%, 13%)

Oklch

oklch(81.9% 0.196 134.0)

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

#576E4A

Celadon · DarkOliveGreen · Forest Green

HEX

#576E4A

RGB

rgb(87, 110, 74)

HSL

hsl(98, 20%, 36%)

HSB

hsb(98, 33%, 43%)

CMYK

cmyk(21%, 0%, 33%, 57%)

Oklch

oklch(51.0% 0.061 134.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

485566

655948

Analogous

486365

485566

4A4865

Triadic

485566

654855

556548

Split-Comp.

485566

654A48

636548

Tetradic

485566

654863

655948

48654A

Contrast Matrix WCAG 2.1 Contrast

485566	259EAE	CDFC43	8CDE4B	576E4A
—	2.4 Fail	6.4 AA	4.6 AA	1.3 Fail
2.4 Fail	—	2.7 Fail	1.9 Fail	1.8 Fail
6.4 AA	2.7 Fail	—	1.4 Fail	4.7 AA
4.6 AA	1.9 Fail	1.4 Fail	—	3.4 AA Large
1.3 Fail	1.8 Fail	4.7 AA	3.4 AA Large	—

White BG

7.6AAA

3.2AA Large

1.2Fail

1.7Fail

5.6AA

Black BG

2.8Fail

6.6AA

17.6AAA

12.7AAA

3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

4E4E62

595AAA

E1E270

B0B06F

616153

Deuteranopia

4D4C61

5249A9

DFDB7B

ABA577

605E55

Tritanopia

495F5E

2BA7A6

CF939B

908B91

585A5B

Achromatopsia

535353

7C7C7C

D9D9D9

B5B5B5

636363

Shades & Tints Shades & Tints

#485566

Dark

Light

#259EAE

Dark

Light

#CDFC43

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #485566;
  --color-2: #259eae;
  --color-3: #cdfc43;
  --color-4: #8cde4b;
  --color-5: #576e4a;
}

SCSS

$color-1: #485566;
$color-2: #259eae;
$color-3: #cdfc43;
$color-4: #8cde4b;
$color-5: #576e4a;

TAILWIND

colors: {
  'brand-1': '#485566',
  'brand-2': '#259eae',
  'brand-3': '#cdfc43',
  'brand-4': '#8cde4b',
  'brand-5': '#576e4a',
}

RGB Array

[72, 85, 102], [37, 158, 174], [205, 252, 67], [140, 222, 75], [87, 110, 74]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #485566, #259EAE, #CDFC43, #8CDE4B, #576E4A 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: #485566; --color-2: #259eae; --color-3: #cdfc43; --color-4: #8cde4b; --color-5: #576e4a. 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 bright-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