← Back to Editor

#A68971 · #5D9AA3 · #B08F4D · #009BB2 · #A6885E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A68971

Tangerine · Gray · Warm Sun

HEX
#A68971
RGB
rgb(166, 137, 113)
HSL
hsl(27, 23%, 55%)
HSB
hsb(27, 32%, 65%)
CMYK
cmyk(0%, 17%, 32%, 35%)
Oklch
oklch(65.1% 0.049 61.4)

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

#5D9AA3

Slate Blue · CadetBlue · Mint Ice

HEX
#5D9AA3
RGB
rgb(93, 154, 163)
HSL
hsl(188, 28%, 50%)
HSB
hsb(188, 43%, 64%)
CMYK
cmyk(43%, 6%, 0%, 36%)
Oklch
oklch(64.8% 0.065 207.7)

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

#B08F4D

Ochre · GoldenRod · Honey Gold

HEX
#B08F4D
RGB
rgb(176, 143, 77)
HSL
hsl(40, 39%, 50%)
HSB
hsb(40, 56%, 69%)
CMYK
cmyk(0%, 19%, 56%, 31%)
Oklch
oklch(66.7% 0.094 83.2)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#009BB2

Lake Blue · LightSeaGreen · Mint Ice

HEX
#009BB2
RGB
rgb(0, 155, 178)
HSL
hsl(188, 100%, 35%)
HSB
hsb(188, 100%, 70%)
CMYK
cmyk(100%, 13%, 0%, 30%)
Oklch
oklch(63.3% 0.111 213.0)

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

#A6885E

Ginger · Gray · Warm Sun

HEX
#A6885E
RGB
rgb(166, 136, 94)
HSL
hsl(35, 29%, 51%)
HSB
hsb(35, 43%, 65%)
CMYK
cmyk(0%, 18%, 43%, 35%)
Oklch
oklch(64.5% 0.068 75.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A68971
728FA7

Analogous

A77274
A68971
A7A472

Triadic

A68971
72A78A
8A72A7

Split-Comp.

A68971
72A7A4
7274A7

Tetradic

A68971
74A772
728FA7
A472A7

Contrast Matrix WCAG 2.1 Contrast

A68971
5D9AA3
B08F4D
009BB2
A6885E
—
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.1
Fail
—
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
White BG
3.3AA Large
3.2AA Large
3.1AA Large
3.3AA Large
3.3AA Large
Black BG
6.4AA
6.6AA
6.9AA
6.3AA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

999977
7778A1
A2A15D
4345AC
999968

Deuteranopia

9B9D78
746FA0
A4A661
3A2FAB
9B9D6B

Tritanopia

A57B7C
609F9F
AE6A6C
08A8A7
A57072

Achromatopsia

8F8F8F
898989
919191
6F6F6F
8C8C8C

Shades & Tints Shades & Tints

#A68971

Dark
Light

#5D9AA3

Dark
Light

#B08F4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a68971;
  --color-2: #5d9aa3;
  --color-3: #b08f4d;
  --color-4: #009bb2;
  --color-5: #a6885e;
}

SCSS

$color-1: #a68971;
$color-2: #5d9aa3;
$color-3: #b08f4d;
$color-4: #009bb2;
$color-5: #a6885e;

TAILWIND

colors: {
  'brand-1': '#a68971',
  'brand-2': '#5d9aa3',
  'brand-3': '#b08f4d',
  'brand-4': '#009bb2',
  'brand-5': '#a6885e',
}

RGB Array

[166, 137, 113], [93, 154, 163], [176, 143, 77], [0, 155, 178], [166, 136, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A68971, #5D9AA3, #B08F4D, #009BB2, #A6885E 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: #a68971; --color-2: #5d9aa3; --color-3: #b08f4d; --color-4: #009bb2; --color-5: #a6885e. 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