← Back to Editor

#12AFB8 · #BC8974 · #635E64 · #BBB3A8 · #E4DED4

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

#12AFB8

Lake Blue · LightSeaGreen · Mint Ice

HEX
#12AFB8
RGB
rgb(18, 175, 184)
HSL
hsl(183, 82%, 40%)
HSB
hsb(183, 90%, 72%)
CMYK
cmyk(90%, 5%, 0%, 28%)
Oklch
oklch(68.7% 0.115 201.5)

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

#BC8974

Tangerine · DarkSalmon · Warm Sun

HEX
#BC8974
RGB
rgb(188, 137, 116)
HSL
hsl(17, 35%, 60%)
HSB
hsb(17, 38%, 74%)
CMYK
cmyk(0%, 27%, 38%, 26%)
Oklch
oklch(67.5% 0.070 43.3)

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

#635E64

Ink Gray · DimGray · Charcoal

HEX
#635E64
RGB
rgb(99, 94, 100)
HSL
hsl(290, 3%, 38%)
HSB
hsb(290, 6%, 39%)
CMYK
cmyk(1%, 6%, 0%, 61%)
Oklch
oklch(48.9% 0.011 320.6)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#BBB3A8

Ginger · DarkGray · Warm Sun

HEX
#BBB3A8
RGB
rgb(187, 179, 168)
HSL
hsl(35, 12%, 70%)
HSB
hsb(35, 10%, 73%)
CMYK
cmyk(0%, 4%, 10%, 27%)
Oklch
oklch(77.0% 0.018 76.1)

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

#E4DED4

Goose Yellow · LightGray · Peach Orange

HEX
#E4DED4
RGB
rgb(228, 222, 212)
HSL
hsl(37, 23%, 86%)
HSB
hsb(37, 7%, 89%)
CMYK
cmyk(0%, 3%, 7%, 11%)
Oklch
oklch(90.3% 0.015 80.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

12AFB8
BA1B12

Analogous

12BA6E
12AFB8
125EBA

Triadic

12AFB8
BA12B1
B1BA12

Split-Comp.

12AFB8
BA125E
BA6E12

Tetradic

12AFB8
6E12BA
BA1B12
5EBA12

Contrast Matrix WCAG 2.1 Contrast

12AFB8
BC8974
635E64
BBB3A8
E4DED4
—
1.1
Fail
2.4
Fail
1.3
Fail
2.0
Fail
1.1
Fail
—
2.1
Fail
1.5
Fail
2.3
Fail
2.4
Fail
2.1
Fail
—
3.1
AA Large
4.7
AA
1.3
Fail
1.5
Fail
3.1
AA Large
—
1.6
Fail
2.0
Fail
2.3
Fail
4.7
AA
1.6
Fail
—
White BG
2.7Fail
3.0AA Large
6.3AA
2.1Fail
1.3Fail
Black BG
7.8AAA
7.0AA
3.3AA Large
10.1AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5657B6
A6A579
616163
B8B7AB
E1E1D6

Deuteranopia

4D41B5
A9AD7A
616262
B8B9AB
E2E2D7

Tritanopia

1AB4B4
B97D7E
636161
BBADAD
E4D8D9

Achromatopsia

818181
969696
606060
B4B4B4
DFDFDF

Shades & Tints Shades & Tints

#12AFB8

Dark
Light

#BC8974

Dark
Light

#635E64

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #12afb8;
  --color-2: #bc8974;
  --color-3: #635e64;
  --color-4: #bbb3a8;
  --color-5: #e4ded4;
}

SCSS

$color-1: #12afb8;
$color-2: #bc8974;
$color-3: #635e64;
$color-4: #bbb3a8;
$color-5: #e4ded4;

TAILWIND

colors: {
  'brand-1': '#12afb8',
  'brand-2': '#bc8974',
  'brand-3': '#635e64',
  'brand-4': '#bbb3a8',
  'brand-5': '#e4ded4',
}

RGB Array

[18, 175, 184], [188, 137, 116], [99, 94, 100], [187, 179, 168], [228, 222, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #12AFB8, #BC8974, #635E64, #BBB3A8, #E4DED4 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: #12afb8; --color-2: #bc8974; --color-3: #635e64; --color-4: #bbb3a8; --color-5: #e4ded4. 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