#283C48 + #C9DA52 + #79AAA2 + #98AB57 + #50AED9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#283C48

Slate Blue · DarkSlateGray · Prussian Blue

HEX

#283C48

RGB

rgb(40, 60, 72)

HSL

hsl(203, 29%, 22%)

HSB

hsb(203, 44%, 28%)

CMYK

cmyk(44%, 17%, 0%, 72%)

Oklch

oklch(34.4% 0.033 235.4)

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

#C9DA52

Autumn Sage · GreenYellow · Sunflower

HEX

#C9DA52

RGB

rgb(201, 218, 82)

HSL

hsl(68, 65%, 59%)

HSB

hsb(68, 62%, 85%)

CMYK

cmyk(8%, 0%, 62%, 15%)

Oklch

oklch(85.0% 0.159 115.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#79AAA2

Mineral Blue · CadetBlue · Lake Green

HEX

#79AAA2

RGB

rgb(121, 170, 162)

HSL

hsl(170, 22%, 57%)

HSB

hsb(170, 29%, 67%)

CMYK

cmyk(29%, 0%, 5%, 33%)

Oklch

oklch(70.1% 0.054 183.5)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#98AB57

Grass Green · DarkSeaGreen · Olive Green

HEX

#98AB57

RGB

rgb(152, 171, 87)

HSL

hsl(74, 33%, 51%)

HSB

hsb(74, 49%, 67%)

CMYK

cmyk(11%, 0%, 49%, 33%)

Oklch

oklch(70.8% 0.112 119.9)

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

#50AED9

Lake Blue · CornflowerBlue · Lake Green

HEX

#50AED9

RGB

rgb(80, 174, 217)

HSL

hsl(199, 64%, 58%)

HSB

hsb(199, 63%, 85%)

CMYK

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

Oklch

oklch(71.2% 0.108 230.8)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

283C48

483428

Analogous

284845

283C48

282C48

Triadic

283C48

48283C

3C4828

Split-Comp.

283C48

48282C

484528

Tetradic

283C48

452848

483428

2C4828

Contrast Matrix WCAG 2.1 Contrast

283C48	C9DA52	79AAA2	98AB57	50AED9
—	7.4 AAA	4.4 AA Large	4.5 AA	4.6 AA
7.4 AAA	—	1.7 Fail	1.6 Fail	1.6 Fail
4.4 AA Large	1.7 Fail	—	1.0 Fail	1.0 Fail
4.5 AA	1.6 Fail	1.0 Fail	—	1.0 Fail
4.6 AA	1.6 Fail	1.0 Fail	1.0 Fail	—

White BG

11.5AAA

1.5Fail

2.6Fail

2.5Fail

Black BG

1.8Fail

13.6AAA

8.1AAA

8.3AAA

8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

313145

D0D173

8E8FA4

A0A06B

797ACF

Deuteranopia

302E44

CFCE7B

8B88A4

9F9E70

736CCC

Tritanopia

294342

CA8D93

7BA5A6

997B7F

55C6C5

Achromatopsia

373737

C5C5C5

9A9A9A

9C9C9C

979797

Shades & Tints Shades & Tints

#283C48

Dark

Light

#C9DA52

Dark

Light

#79AAA2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #283c48;
  --color-2: #c9da52;
  --color-3: #79aaa2;
  --color-4: #98ab57;
  --color-5: #50aed9;
}

SCSS

$color-1: #283c48;
$color-2: #c9da52;
$color-3: #79aaa2;
$color-4: #98ab57;
$color-5: #50aed9;

TAILWIND

colors: {
  'brand-1': '#283c48',
  'brand-2': '#c9da52',
  'brand-3': '#79aaa2',
  'brand-4': '#98ab57',
  'brand-5': '#50aed9',
}

RGB Array

[40, 60, 72], [201, 218, 82], [121, 170, 162], [152, 171, 87], [80, 174, 217]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #283C48, #C9DA52, #79AAA2, #98AB57, #50AED9 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: #283c48; --color-2: #c9da52; --color-3: #79aaa2; --color-4: #98ab57; --color-5: #50aed9. 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