#997D00 + #993D3D + #464A4A + #2C234A + #020F0F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#997D00

Ochre · Olive · Honey Gold

HEX

#997D00

RGB

rgb(153, 125, 0)

HSL

hsl(49, 100%, 30%)

HSB

hsb(49, 100%, 60%)

CMYK

cmyk(0%, 18%, 100%, 40%)

Oklch

oklch(59.9% 0.123 93.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#993D3D

Crimson · Sienna · Passion Red

HEX

#993D3D

RGB

rgb(153, 61, 61)

HSL

hsl(0, 43%, 42%)

HSB

hsb(0, 60%, 60%)

CMYK

cmyk(0%, 60%, 60%, 40%)

Oklch

oklch(48.6% 0.124 22.9)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#464A4A

Dark Cyan · DarkSlateGray · Charcoal

HEX

#464A4A

RGB

rgb(70, 74, 74)

HSL

hsl(180, 3%, 28%)

HSB

hsb(180, 5%, 29%)

CMYK

cmyk(5%, 0%, 0%, 71%)

Oklch

oklch(40.5% 0.005 196.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#2C234A

Deep Indigo · MidnightBlue · Prussian Blue

HEX

#2C234A

RGB

rgb(44, 35, 74)

HSL

hsl(254, 36%, 21%)

HSB

hsb(254, 53%, 29%)

CMYK

cmyk(41%, 53%, 0%, 71%)

Oklch

oklch(28.8% 0.070 292.1)

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

#020F0F

Lake Blue · Black · Peacock Green

HEX

#020F0F

RGB

rgb(2, 15, 15)

HSL

hsl(180, 76%, 3%)

HSB

hsb(180, 87%, 6%)

CMYK

cmyk(87%, 0%, 0%, 94%)

Oklch

oklch(15.5% 0.022 195.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

997D00

001C99

Analogous

993000

997D00

699900

Triadic

997D00

00997D

7D0099

Split-Comp.

997D00

006999

300099

Tetradic

997D00

009930

001C99

990069

Contrast Matrix WCAG 2.1 Contrast

997D00	993D3D	464A4A	2C234A	020F0F
—	1.7 Fail	2.3 Fail	3.7 AA Large	4.9 AA
1.7 Fail	—	1.3 Fail	2.1 Fail	2.9 Fail
2.3 Fail	1.3 Fail	—	1.6 Fail	2.2 Fail
3.7 AA Large	2.1 Fail	1.6 Fail	—	1.3 Fail
4.9 AA	2.9 Fail	2.2 Fail	1.3 Fail	—

White BG

4.0AA Large

6.8AA

9.0AAA

14.5AAA

19.5AAA

Black BG

5.3AA

3.1AA Large

2.3Fail

1.4Fail

1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8D8D1E

71703D

48484A

282841

08080F

Deuteranopia

8F9126

777D3D

48474A

29293E

07060F

Tritanopia

98363B

943D3D

464A4A

2C3937

030F0F

Achromatopsia

777777

595959

494949

2A2A2A

0B0B0B

Shades & Tints Shades & Tints

#997D00

Dark

Light

#993D3D

Dark

Light

#464A4A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #997d00;
  --color-2: #993d3d;
  --color-3: #464a4a;
  --color-4: #2c234a;
  --color-5: #020f0f;
}

SCSS

$color-1: #997d00;
$color-2: #993d3d;
$color-3: #464a4a;
$color-4: #2c234a;
$color-5: #020f0f;

TAILWIND

colors: {
  'brand-1': '#997d00',
  'brand-2': '#993d3d',
  'brand-3': '#464a4a',
  'brand-4': '#2c234a',
  'brand-5': '#020f0f',
}

RGB Array

[153, 125, 0], [153, 61, 61], [70, 74, 74], [44, 35, 74], [2, 15, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #997D00, #993D3D, #464A4A, #2C234A, #020F0F 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: #997d00; --color-2: #993d3d; --color-3: #464a4a; --color-4: #2c234a; --color-5: #020f0f. 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