#55322A + #434983 + #0A8CB3 + #A2AC66 + #F3A552 · earth - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#55322A

Crimson · DarkOliveGreen · Wine Red

HEX

#55322A

RGB

rgb(85, 50, 42)

HSL

hsl(11, 34%, 25%)

HSB

hsb(11, 51%, 33%)

CMYK

cmyk(0%, 41%, 51%, 67%)

Oklch

oklch(35.8% 0.053 33.6)

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

#434983

Indigo · DarkSlateBlue · Prussian Blue

HEX

#434983

RGB

rgb(67, 73, 131)

HSL

hsl(234, 32%, 39%)

HSB

hsb(234, 49%, 51%)

CMYK

cmyk(49%, 44%, 0%, 49%)

Oklch

oklch(42.9% 0.096 277.1)

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

#0A8CB3

Lake Blue · LightSeaGreen · Mint Ice

HEX

#0A8CB3

RGB

rgb(10, 140, 179)

HSL

hsl(194, 89%, 37%)

HSB

hsb(194, 94%, 70%)

CMYK

cmyk(94%, 22%, 0%, 30%)

Oklch

oklch(59.7% 0.113 226.6)

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

#A2AC66

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A2AC66

RGB

rgb(162, 172, 102)

HSL

hsl(69, 30%, 54%)

HSB

hsb(69, 41%, 67%)

CMYK

cmyk(6%, 0%, 41%, 33%)

Oklch

oklch(72.0% 0.094 115.5)

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

#F3A552

Ginger · SandyBrown · Warm Sun

HEX

#F3A552

RGB

rgb(243, 165, 82)

HSL

hsl(31, 87%, 64%)

HSB

hsb(31, 66%, 95%)

CMYK

cmyk(0%, 32%, 66%, 5%)

Oklch

oklch(78.3% 0.135 65.1)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

55322A

2A4D55

Analogous

552A38

55322A

55482A

Triadic

55322A

2A5532

322A55

Split-Comp.

55322A

2A5548

2A3855

Tetradic

55322A

38552A

2A4D55

482A55

Contrast Matrix WCAG 2.1 Contrast

55322A	434983	0A8CB3	A2AC66	F3A552
—	1.3 Fail	2.9 Fail	4.6 AA	5.5 AA
1.3 Fail	—	2.1 Fail	3.4 AA Large	4.1 AA Large
2.9 Fail	2.1 Fail	—	1.6 Fail	1.9 Fail
4.6 AA	3.4 AA Large	1.6 Fail	—	1.2 Fail
5.5 AA	4.1 AA Large	1.9 Fail	1.2 Fail	—

White BG

11.2AAA

8.3AAA

3.9AA Large

2.4Fail

2.0Fail

Black BG

1.9Fail

2.5Fail

5.4AA

8.6AAA

10.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

46462C

464675

4243AA

A6A677

D1D166

Deuteranopia

484B2C

454572

3B31A7

A6A57B

D6DC6B

Tritanopia

532D2E

436A67

11A2A0

A38487

EF7679

Achromatopsia

3C3C3C

4E4E4E

6A6A6A

A1A1A1

B3B3B3

Shades & Tints Shades & Tints

#55322A

Dark

Light

#434983

Dark

Light

#0A8CB3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #55322a;
  --color-2: #434983;
  --color-3: #0a8cb3;
  --color-4: #a2ac66;
  --color-5: #f3a552;
}

SCSS

$color-1: #55322a;
$color-2: #434983;
$color-3: #0a8cb3;
$color-4: #a2ac66;
$color-5: #f3a552;

TAILWIND

colors: {
  'brand-1': '#55322a',
  'brand-2': '#434983',
  'brand-3': '#0a8cb3',
  'brand-4': '#a2ac66',
  'brand-5': '#f3a552',
}

RGB Array

[85, 50, 42], [67, 73, 131], [10, 140, 179], [162, 172, 102], [243, 165, 82]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #55322A, #434983, #0A8CB3, #A2AC66, #F3A552 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: #55322a; --color-2: #434983; --color-3: #0a8cb3; --color-4: #a2ac66; --color-5: #f3a552. 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 earth-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