← Back to Editor

#779182 · #B1B897 · #D1BA92 · #A03A21 · #AB5005

bright

A 5-color bright 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

#779182

Celadon · Gray · Olive Green

HEX
#779182
RGB
rgb(119, 145, 130)
HSL
hsl(145, 11%, 52%)
HSB
hsb(145, 18%, 57%)
CMYK
cmyk(18%, 0%, 10%, 43%)
Oklch
oklch(63.2% 0.037 159.8)

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

#B1B897

Willow Green · DarkGray · Apple Green

HEX
#B1B897
RGB
rgb(177, 184, 151)
HSL
hsl(73, 19%, 66%)
HSB
hsb(73, 18%, 72%)
CMYK
cmyk(4%, 0%, 18%, 28%)
Oklch
oklch(76.8% 0.046 117.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D1BA92

Ginger · Tan · Warm Sun

HEX
#D1BA92
RGB
rgb(209, 186, 146)
HSL
hsl(38, 41%, 70%)
HSB
hsb(38, 30%, 82%)
CMYK
cmyk(0%, 11%, 30%, 18%)
Oklch
oklch(79.9% 0.060 81.3)

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

#A03A21

Vermilion · Brown · Wine Red

HEX
#A03A21
RGB
rgb(160, 58, 33)
HSL
hsl(12, 66%, 38%)
HSB
hsb(12, 79%, 63%)
CMYK
cmyk(0%, 64%, 79%, 37%)
Oklch
oklch(48.9% 0.141 34.9)

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

#AB5005

Tangerine · Sienna · Amber Brown

HEX
#AB5005
RGB
rgb(171, 80, 5)
HSL
hsl(27, 94%, 35%)
HSB
hsb(27, 97%, 67%)
CMYK
cmyk(0%, 53%, 97%, 33%)
Oklch
oklch(53.7% 0.139 50.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

779182
927787

Analogous

799277
779182
779290

Triadic

779182
827792
928277

Split-Comp.

779182
907792
927779

Tetradic

779182
777992
927787
929077

Contrast Matrix WCAG 2.1 Contrast

779182
B1B897
D1BA92
A03A21
AB5005
—
1.7
Fail
1.8
Fail
2.0
Fail
1.6
Fail
1.7
Fail
—
1.1
Fail
3.3
AA Large
2.6
Fail
1.8
Fail
1.1
Fail
—
3.6
AA Large
2.9
Fail
2.0
Fail
3.3
AA Large
3.6
AA Large
—
1.2
Fail
1.6
Fail
2.6
Fail
2.9
Fail
1.2
Fail
—
White BG
3.4AA Large
2.1Fail
1.9Fail
6.7AA
5.4AA
Black BG
6.2AA
10.2AAA
11.1AAA
3.1AA Large
3.9AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

828286
B4B49F
C7C79C
747327
848317

Deuteranopia

817F87
B4B3A1
C8CA9E
7A8129
89901C

Tritanopia

788889
B1A5A7
D0A3A5
9B2C2D
A62529

Achromatopsia

888888
B2B2B2
BCBCBC
565656
636363

Shades & Tints Shades & Tints

#779182

Dark
Light

#B1B897

Dark
Light

#D1BA92

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #779182;
  --color-2: #b1b897;
  --color-3: #d1ba92;
  --color-4: #a03a21;
  --color-5: #ab5005;
}

SCSS

$color-1: #779182;
$color-2: #b1b897;
$color-3: #d1ba92;
$color-4: #a03a21;
$color-5: #ab5005;

TAILWIND

colors: {
  'brand-1': '#779182',
  'brand-2': '#b1b897',
  'brand-3': '#d1ba92',
  'brand-4': '#a03a21',
  'brand-5': '#ab5005',
}

RGB Array

[119, 145, 130], [177, 184, 151], [209, 186, 146], [160, 58, 33], [171, 80, 5]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #779182, #B1B897, #D1BA92, #A03A21, #AB5005 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: #779182; --color-2: #b1b897; --color-3: #d1ba92; --color-4: #a03a21; --color-5: #ab5005. 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 bright-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