← Back to Editor

#B4DDCC · #019494 · #684651 · #978577 · #B1A08E

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

#B4DDCC

Jade · LightBlue · Apple Green

HEX
#B4DDCC
RGB
rgb(180, 221, 204)
HSL
hsl(155, 38%, 79%)
HSB
hsb(155, 19%, 87%)
CMYK
cmyk(19%, 0%, 8%, 13%)
Oklch
oklch(86.3% 0.049 168.1)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#019494

Lake Blue · Teal · Mint Ice

HEX
#019494
RGB
rgb(1, 148, 148)
HSL
hsl(180, 99%, 29%)
HSB
hsb(180, 99%, 58%)
CMYK
cmyk(99%, 0%, 0%, 42%)
Oklch
oklch(60.4% 0.103 194.8)

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

#684651

Dark Violet · DimGray · Camellia

HEX
#684651
RGB
rgb(104, 70, 81)
HSL
hsl(341, 20%, 34%)
HSB
hsb(341, 33%, 41%)
CMYK
cmyk(0%, 33%, 22%, 59%)
Oklch
oklch(43.6% 0.049 358.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#978577

Tangerine · Gray · Warm Sun

HEX
#978577
RGB
rgb(151, 133, 119)
HSL
hsl(26, 13%, 53%)
HSB
hsb(26, 21%, 59%)
CMYK
cmyk(0%, 12%, 21%, 41%)
Oklch
oklch(62.9% 0.030 60.1)

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

#B1A08E

Ginger · DarkGray · Warm Sun

HEX
#B1A08E
RGB
rgb(177, 160, 142)
HSL
hsl(31, 18%, 63%)
HSB
hsb(31, 20%, 69%)
CMYK
cmyk(0%, 10%, 20%, 31%)
Oklch
oklch(71.6% 0.032 68.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4DDCC
DEB5C6

Analogous

B5DEB8
B4DDCC
B5DADE

Triadic

B4DDCC
CDB5DE
DECDB5

Split-Comp.

B4DDCC
DEB5DA
DEB8B5

Tetradic

B4DDCC
B8B5DE
DEB5C6
DADEB5

Contrast Matrix WCAG 2.1 Contrast

B4DDCC
019494
684651
978577
B1A08E
—
2.5
Fail
5.5
AA
2.4
Fail
1.7
Fail
2.5
Fail
—
2.2
Fail
1.0
Fail
1.5
Fail
5.5
AA
2.2
Fail
—
2.3
Fail
3.2
AA Large
2.4
Fail
1.0
Fail
2.3
Fail
—
1.4
Fail
1.7
Fail
1.5
Fail
3.2
AA Large
1.4
Fail
—
White BG
1.5Fail
3.7AA Large
8.1AAA
3.5AA Large
2.5Fail
Black BG
14.2AAA
5.7AA
2.6Fail
5.9AA
8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C6D0
414294
59594E
8F8F7A
AAA992

Deuteranopia

C3C0D1
382D94
5B5E4E
90927B
ABAC93

Tritanopia

B6D3D4
089494
664C4C
967D7E
B09697

Achromatopsia

CFCFCF
686868
515151
898989
A3A3A3

Shades & Tints Shades & Tints

#B4DDCC

Dark
Light

#019494

Dark
Light

#684651

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4ddcc;
  --color-2: #019494;
  --color-3: #684651;
  --color-4: #978577;
  --color-5: #b1a08e;
}

SCSS

$color-1: #b4ddcc;
$color-2: #019494;
$color-3: #684651;
$color-4: #978577;
$color-5: #b1a08e;

TAILWIND

colors: {
  'brand-1': '#b4ddcc',
  'brand-2': '#019494',
  'brand-3': '#684651',
  'brand-4': '#978577',
  'brand-5': '#b1a08e',
}

RGB Array

[180, 221, 204], [1, 148, 148], [104, 70, 81], [151, 133, 119], [177, 160, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4DDCC, #019494, #684651, #978577, #B1A08E 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: #b4ddcc; --color-2: #019494; --color-3: #684651; --color-4: #978577; --color-5: #b1a08e. 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