← Back to Editor

#618271 · #521912 · #B92906 · #E76622 · #B2AA45

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#618271

Celadon · DimGray · Olive Green

HEX
#618271
RGB
rgb(97, 130, 113)
HSL
hsl(149, 15%, 45%)
HSB
hsb(149, 25%, 51%)
CMYK
cmyk(25%, 0%, 13%, 49%)
Oklch
oklch(57.6% 0.046 162.1)

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

#521912

Vermilion · Maroon · Deep Berry

HEX
#521912
RGB
rgb(82, 25, 18)
HSL
hsl(7, 64%, 20%)
HSB
hsb(7, 78%, 32%)
CMYK
cmyk(0%, 70%, 78%, 68%)
Oklch
oklch(30.4% 0.087 29.9)

Traditional「Vermilion」· Paint「Deep Berry」· Creative Blush Sunrise

#B92906

Vermilion · FireBrick · Wine Red

HEX
#B92906
RGB
rgb(185, 41, 6)
HSL
hsl(12, 94%, 37%)
HSB
hsb(12, 97%, 73%)
CMYK
cmyk(0%, 78%, 97%, 27%)
Oklch
oklch(51.3% 0.184 33.3)

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

#E76622

Tangerine · Chocolate · Warm Sun

HEX
#E76622
RGB
rgb(231, 102, 34)
HSL
hsl(21, 80%, 52%)
HSB
hsb(21, 85%, 91%)
CMYK
cmyk(0%, 56%, 85%, 9%)
Oklch
oklch(66.1% 0.177 44.0)

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

#B2AA45

Autumn Sage · GoldenRod · Honey Gold

HEX
#B2AA45
RGB
rgb(178, 170, 69)
HSL
hsl(56, 44%, 48%)
HSB
hsb(56, 61%, 70%)
CMYK
cmyk(0%, 4%, 61%, 30%)
Oklch
oklch(72.5% 0.122 104.8)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

618271
846273

Analogous

628462
618271
628483

Triadic

618271
726284
847262

Split-Comp.

618271
836284
846262

Tetradic

618271
626284
846273
848362

Contrast Matrix WCAG 2.1 Contrast

618271
521912
B92906
E76622
B2AA45
—
3.3
AA Large
1.5
Fail
1.3
Fail
1.8
Fail
3.3
AA Large
—
2.2
Fail
4.2
AA Large
5.8
AA
1.5
Fail
2.2
Fail
—
1.9
Fail
2.6
Fail
1.3
Fail
4.2
AA Large
1.9
Fail
—
1.4
Fail
1.8
Fail
5.8
AA
2.6
Fail
1.4
Fail
—
White BG
4.3AA Large
13.9AAA
6.2AA
3.3AA Large
2.4Fail
Black BG
4.9AA
1.5Fail
3.4AA Large
6.3AA
8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F7075
393914
7B790E
AFAE32
AFAE5D

Deuteranopia

6D6B76
3D4114
838E11
B7C036
AFB063

Tritanopia

637879
4F1515
B21517
E13F42
B27175

Achromatopsia

767676
292929
505050
858585
A1A1A1

Shades & Tints Shades & Tints

#618271

Dark
Light

#521912

Dark
Light

#B92906

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #618271;
  --color-2: #521912;
  --color-3: #b92906;
  --color-4: #e76622;
  --color-5: #b2aa45;
}

SCSS

$color-1: #618271;
$color-2: #521912;
$color-3: #b92906;
$color-4: #e76622;
$color-5: #b2aa45;

TAILWIND

colors: {
  'brand-1': '#618271',
  'brand-2': '#521912',
  'brand-3': '#b92906',
  'brand-4': '#e76622',
  'brand-5': '#b2aa45',
}

RGB Array

[97, 130, 113], [82, 25, 18], [185, 41, 6], [231, 102, 34], [178, 170, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #618271, #521912, #B92906, #E76622, #B2AA45 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: #618271; --color-2: #521912; --color-3: #b92906; --color-4: #e76622; --color-5: #b2aa45. 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 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