#302C29 + #FF9716 + #87A27D + #518688 + #532C3A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#302C29

Tangerine · DarkSlateGray · Dark Stone

HEX

#302C29

RGB

rgb(48, 44, 41)

HSL

hsl(26, 8%, 17%)

HSB

hsb(26, 15%, 19%)

CMYK

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

Oklch

oklch(29.6% 0.008 59.4)

Traditional「Tangerine」· Paint「Dark Stone」· Creative Midnight Shadow

#FF9716

Ginger · Orange · Warm Sun

HEX

#FF9716

RGB

rgb(255, 151, 22)

HSL

hsl(33, 100%, 54%)

HSB

hsb(33, 91%, 100%)

CMYK

cmyk(0%, 41%, 91%, 0%)

Oklch

oklch(76.9% 0.172 62.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#87A27D

Celadon · DarkSeaGreen · Olive Green

HEX

#87A27D

RGB

rgb(135, 162, 125)

HSL

hsl(104, 17%, 56%)

HSB

hsb(104, 23%, 64%)

CMYK

cmyk(17%, 0%, 23%, 36%)

Oklch

oklch(68.1% 0.061 137.3)

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

#518688

Slate Blue · SlateGray · Mint Ice

HEX

#518688

RGB

rgb(81, 134, 136)

HSL

hsl(182, 25%, 43%)

HSB

hsb(182, 40%, 53%)

CMYK

cmyk(40%, 1%, 0%, 47%)

Oklch

oklch(58.4% 0.057 198.8)

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

#532C3A

Dark Violet · DarkSlateGray · Raspberry

HEX

#532C3A

RGB

rgb(83, 44, 58)

HSL

hsl(338, 31%, 25%)

HSB

hsb(338, 47%, 33%)

CMYK

cmyk(0%, 47%, 30%, 67%)

Oklch

oklch(34.8% 0.060 357.8)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

302C29

282C2F

Analogous

2F2828

302C29

2F2E28

Triadic

302C29

282F2B

2B282F

Split-Comp.

302C29

282F2E

28282F

Tetradic

302C29

282F28

282C2F

2E282F

Contrast Matrix WCAG 2.1 Contrast

302C29	FF9716	87A27D	518688	532C3A
—	6.4 AA	4.9 AA	3.4 AA Large	1.2 Fail
6.4 AA	—	1.3 Fail	1.9 Fail	5.4 AA
4.9 AA	1.3 Fail	—	1.5 Fail	4.2 AA Large
3.4 AA Large	1.9 Fail	1.5 Fail	—	2.9 Fail
1.2 Fail	5.4 AA	4.2 AA Large	2.9 Fail	—

White BG

13.8AAA

2.2Fail

2.8Fail

4.1AA Large

11.7AAA

Black BG

1.5Fail

9.7AAA

7.5AAA

5.1AA

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2E2A

D2D135

939386

686888

424237

Deuteranopia

2F2F2A

D8E03D

918F88

656187

444736

Tritanopia

302A2A

FA4E53

888D8F

548787

513433

Achromatopsia

2D2D2D

A7A7A7

969696

767676

393939

Shades & Tints Shades & Tints

#302C29

Dark

Light

#FF9716

Dark

Light

#87A27D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #302c29;
  --color-2: #ff9716;
  --color-3: #87a27d;
  --color-4: #518688;
  --color-5: #532c3a;
}

SCSS

$color-1: #302c29;
$color-2: #ff9716;
$color-3: #87a27d;
$color-4: #518688;
$color-5: #532c3a;

TAILWIND

colors: {
  'brand-1': '#302c29',
  'brand-2': '#ff9716',
  'brand-3': '#87a27d',
  'brand-4': '#518688',
  'brand-5': '#532c3a',
}

RGB Array

[48, 44, 41], [255, 151, 22], [135, 162, 125], [81, 134, 136], [83, 44, 58]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #302C29, #FF9716, #87A27D, #518688, #532C3A is ideal for: tech websites, dark mode UIs, game UIs. 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: #302c29; --color-2: #ff9716; --color-3: #87a27d; --color-4: #518688; --color-5: #532c3a. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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