← Back to Editor

#6F4815 · #7A6949 · #858A7E · #90ABB2 · #9BCDE7

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 LibraryData Visualization

Color Details Color Details

#6F4815

Ochre · DarkOliveGreen · Amber Brown

HEX
#6F4815
RGB
rgb(111, 72, 21)
HSL
hsl(34, 68%, 26%)
HSB
hsb(34, 81%, 44%)
CMYK
cmyk(0%, 35%, 81%, 56%)
Oklch
oklch(43.6% 0.083 68.9)

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

#7A6949

Ochre · DimGray · Amber Brown

HEX
#7A6949
RGB
rgb(122, 105, 73)
HSL
hsl(39, 25%, 38%)
HSB
hsb(39, 40%, 48%)
CMYK
cmyk(0%, 14%, 40%, 52%)
Oklch
oklch(52.9% 0.051 82.9)

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

#858A7E

Ash · Gray · Warm Gray

HEX
#858A7E
RGB
rgb(133, 138, 126)
HSL
hsl(85, 5%, 52%)
HSB
hsb(85, 9%, 54%)
CMYK
cmyk(4%, 0%, 9%, 46%)
Oklch
oklch(62.6% 0.019 125.5)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#90ABB2

Sky Blue · DarkGray · Lake Green

HEX
#90ABB2
RGB
rgb(144, 171, 178)
HSL
hsl(192, 18%, 63%)
HSB
hsb(192, 19%, 70%)
CMYK
cmyk(19%, 4%, 0%, 30%)
Oklch
oklch(72.3% 0.032 215.2)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#9BCDE7

Sky Blue · SkyBlue · Cobalt Blue

HEX
#9BCDE7
RGB
rgb(155, 205, 231)
HSL
hsl(201, 61%, 76%)
HSB
hsb(201, 33%, 91%)
CMYK
cmyk(33%, 11%, 0%, 9%)
Oklch
oklch(82.2% 0.064 231.1)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6F4815
153C6F

Analogous

6F1B15
6F4815
696F15

Triadic

6F4815
156F48
48156F

Split-Comp.

6F4815
15696F
1B156F

Tetradic

6F4815
156F1B
153C6F
6F1569

Contrast Matrix WCAG 2.1 Contrast

6F4815
7A6949
858A7E
90ABB2
9BCDE7
—
1.5
Fail
2.3
Fail
3.3
AA Large
4.7
AA
1.5
Fail
—
1.5
Fail
2.2
Fail
3.1
AA Large
2.3
Fail
1.5
Fail
—
1.5
Fail
2.1
Fail
3.3
AA Large
2.2
Fail
1.5
Fail
—
1.4
Fail
4.7
AA
3.1
AA Large
2.1
Fail
1.4
Fail
—
White BG
8.0AAA
5.3AA
3.5AA Large
2.4Fail
1.7Fail
Black BG
2.6Fail
3.9AA Large
5.9AA
8.7AAA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E21
737251
878781
9C9CB0
B1B1E1

Deuteranopia

606324
747553
878782
9A98B0
AEAADF

Tritanopia

6D2B2D
795758
858384
91AFAF
9EDCDB

Achromatopsia

4E4E4E
6A6A6A
878787
A4A4A4
C1C1C1

Shades & Tints Shades & Tints

#6F4815

Dark
Light

#7A6949

Dark
Light

#858A7E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6f4815;
  --color-2: #7a6949;
  --color-3: #858a7e;
  --color-4: #90abb2;
  --color-5: #9bcde7;
}

SCSS

$color-1: #6f4815;
$color-2: #7a6949;
$color-3: #858a7e;
$color-4: #90abb2;
$color-5: #9bcde7;

TAILWIND

colors: {
  'brand-1': '#6f4815',
  'brand-2': '#7a6949',
  'brand-3': '#858a7e',
  'brand-4': '#90abb2',
  'brand-5': '#9bcde7',
}

RGB Array

[111, 72, 21], [122, 105, 73], [133, 138, 126], [144, 171, 178], [155, 205, 231]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #6F4815, #7A6949, #858A7E, #90ABB2, #9BCDE7 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #6f4815; --color-2: #7a6949; --color-3: #858a7e; --color-4: #90abb2; --color-5: #9bcde7. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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