#64584A + #0C232B + #F98500 + #C44D2D + #493224 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#64584A

Ochre · DimGray · Amber Brown

HEX

#64584A

RGB

rgb(100, 88, 74)

HSL

hsl(32, 15%, 34%)

HSB

hsb(32, 26%, 39%)

CMYK

cmyk(0%, 12%, 26%, 61%)

Oklch

oklch(46.8% 0.027 71.4)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#0C232B

Lake Blue · Black · Peacock Green

HEX

#0C232B

RGB

rgb(12, 35, 43)

HSL

hsl(195, 56%, 11%)

HSB

hsb(195, 72%, 17%)

CMYK

cmyk(72%, 19%, 0%, 83%)

Oklch

oklch(24.2% 0.033 223.5)

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

#F98500

Ochre · Orange · Amber Brown

HEX

#F98500

RGB

rgb(249, 133, 0)

HSL

hsl(32, 100%, 49%)

HSB

hsb(32, 100%, 98%)

CMYK

cmyk(0%, 47%, 100%, 2%)

Oklch

oklch(73.1% 0.178 56.6)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#C44D2D

Vermilion · Chocolate · Passion Red

HEX

#C44D2D

RGB

rgb(196, 77, 45)

HSL

hsl(13, 63%, 47%)

HSB

hsb(13, 77%, 77%)

CMYK

cmyk(0%, 61%, 77%, 23%)

Oklch

oklch(57.4% 0.159 35.9)

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

#493224

Tangerine · DarkSlateGray · Cinnamon

HEX

#493224

RGB

rgb(73, 50, 36)

HSL

hsl(23, 34%, 21%)

HSB

hsb(23, 51%, 29%)

CMYK

cmyk(0%, 32%, 51%, 71%)

Oklch

oklch(34.0% 0.041 52.2)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

64584A

4A5664

Analogous

644B4A

64584A

63644A

Triadic

64584A

4A6458

584A64

Split-Comp.

64584A

4A6364

4B4A64

Tetradic

64584A

4A644B

4A5664

644A63

Contrast Matrix WCAG 2.1 Contrast

64584A	0C232B	F98500	C44D2D	493224
—	2.4 Fail	2.8 Fail	1.5 Fail	1.7 Fail
2.4 Fail	—	6.5 AA	3.4 AA Large	1.4 Fail
2.8 Fail	6.5 AA	—	1.9 Fail	4.7 AA
1.5 Fail	3.4 AA Large	1.9 Fail	—	2.5 Fail
1.7 Fail	1.4 Fail	4.7 AA	2.5 Fail	—

White BG

6.9AA

16.3AAA

2.5Fail

4.7AA

11.9AAA

Black BG

3.0AA Large

1.3Fail

8.4AAA

4.4AA Large

1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5F5F4D

161629

C7C620

908F35

3F3F27

Deuteranopia

60604E

151329

CED628

97A037

404228

Tritanopia

635051

0D2827

F33A3F

BE3B3C

482A2B

Achromatopsia

5A5A5A

1D1D1D

999999

6D6D6D

373737

Shades & Tints Shades & Tints

#64584A

Dark

Light

#0C232B

Dark

Light

#F98500

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #64584a;
  --color-2: #0c232b;
  --color-3: #f98500;
  --color-4: #c44d2d;
  --color-5: #493224;
}

SCSS

$color-1: #64584a;
$color-2: #0c232b;
$color-3: #f98500;
$color-4: #c44d2d;
$color-5: #493224;

TAILWIND

colors: {
  'brand-1': '#64584a',
  'brand-2': '#0c232b',
  'brand-3': '#f98500',
  'brand-4': '#c44d2d',
  'brand-5': '#493224',
}

RGB Array

[100, 88, 74], [12, 35, 43], [249, 133, 0], [196, 77, 45], [73, 50, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #64584A, #0C232B, #F98500, #C44D2D, #493224 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: #64584a; --color-2: #0c232b; --color-3: #f98500; --color-4: #c44d2d; --color-5: #493224. 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