#52382F + #F05A20 + #4A423F + #455959 + #247073 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#52382F

Tangerine · DarkOliveGreen · Cinnamon

HEX

#52382F

RGB

rgb(82, 56, 47)

HSL

hsl(15, 27%, 25%)

HSB

hsb(15, 43%, 32%)

CMYK

cmyk(0%, 32%, 43%, 68%)

Oklch

oklch(36.8% 0.040 39.9)

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

#F05A20

Tangerine · Chocolate · Warm Sun

HEX

#F05A20

RGB

rgb(240, 90, 32)

HSL

hsl(17, 87%, 53%)

HSB

hsb(17, 87%, 94%)

CMYK

cmyk(0%, 62%, 87%, 6%)

Oklch

oklch(65.9% 0.196 38.9)

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

#4A423F

Tangerine · DarkSlateGray · Charcoal

HEX

#4A423F

RGB

rgb(74, 66, 63)

HSL

hsl(16, 8%, 27%)

HSB

hsb(16, 15%, 29%)

CMYK

cmyk(0%, 11%, 15%, 71%)

Oklch

oklch(38.6% 0.012 41.7)

Traditional「Tangerine」· Paint「Charcoal」· Creative Midnight Shadow

#455959

Slate Blue · DarkSlateGray · Mint Ice

HEX

#455959

RGB

rgb(69, 89, 89)

HSL

hsl(180, 13%, 31%)

HSB

hsb(180, 22%, 35%)

CMYK

cmyk(22%, 0%, 0%, 65%)

Oklch

oklch(44.7% 0.024 196.3)

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

#247073

Lake Blue · SeaGreen · Mint Ice

HEX

#247073

RGB

rgb(36, 112, 115)

HSL

hsl(182, 52%, 30%)

HSB

hsb(182, 69%, 45%)

CMYK

cmyk(69%, 3%, 0%, 55%)

Oklch

oklch(50.1% 0.073 198.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

52382F

2F4851

Analogous

512F37

52382F

51482F

Triadic

52382F

2F5137

372F51

Split-Comp.

52382F

2F5148

2F3751

Tetradic

52382F

37512F

2F4851

482F51

Contrast Matrix WCAG 2.1 Contrast

52382F	F05A20	4A423F	455959	247073
—	3.1 AA Large	1.1 Fail	1.4 Fail	1.9 Fail
3.1 AA Large	—	2.9 Fail	2.2 Fail	1.7 Fail
1.1 Fail	2.9 Fail	—	1.3 Fail	1.7 Fail
1.4 Fail	2.2 Fail	1.3 Fail	—	1.3 Fail
1.9 Fail	1.7 Fail	1.7 Fail	1.3 Fail	—

White BG

10.7AAA

3.4AA Large

9.8AAA

7.4AAA

5.8AA

Black BG

2.0Fail

6.2AA

2.1Fail

2.8Fail

3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

474731

AFAE2E

474640

4E4E59

454672

Deuteranopia

484A32

B8C331

474840

4D4B59

413B72

Tritanopia

513333

E9393C

4A4040

465959

287272

Achromatopsia

3F3F3F

808080

444444

535353

5A5A5A

Shades & Tints Shades & Tints

#52382F

Dark

Light

#F05A20

Dark

Light

#4A423F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #52382f;
  --color-2: #f05a20;
  --color-3: #4a423f;
  --color-4: #455959;
  --color-5: #247073;
}

SCSS

$color-1: #52382f;
$color-2: #f05a20;
$color-3: #4a423f;
$color-4: #455959;
$color-5: #247073;

TAILWIND

colors: {
  'brand-1': '#52382f',
  'brand-2': '#f05a20',
  'brand-3': '#4a423f',
  'brand-4': '#455959',
  'brand-5': '#247073',
}

RGB Array

[82, 56, 47], [240, 90, 32], [74, 66, 63], [69, 89, 89], [36, 112, 115]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #52382F, #F05A20, #4A423F, #455959, #247073 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: #52382f; --color-2: #f05a20; --color-3: #4a423f; --color-4: #455959; --color-5: #247073. 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