← Back to Editor

#ADB0BF · #BAC2C4 · #C7D3C9 · #E1E4D1 · #302D36

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#ADB0BF

Azure · DarkGray · Cobalt Blue

HEX
#ADB0BF
RGB
rgb(173, 176, 191)
HSL
hsl(230, 12%, 71%)
HSB
hsb(230, 9%, 75%)
CMYK
cmyk(9%, 8%, 0%, 25%)
Oklch
oklch(76.0% 0.022 276.9)

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

#BAC2C4

Sky Blue · Silver · Pearl Gray

HEX
#BAC2C4
RGB
rgb(186, 194, 196)
HSL
hsl(192, 8%, 75%)
HSB
hsb(192, 5%, 77%)
CMYK
cmyk(5%, 1%, 0%, 23%)
Oklch
oklch(80.8% 0.009 214.3)

Traditional「Sky Blue」· Paint「Pearl Gray」· Creative Silver Lining

#C7D3C9

Celadon · LightGray · Apple Green

HEX
#C7D3C9
RGB
rgb(199, 211, 201)
HSL
hsl(130, 12%, 80%)
HSB
hsb(130, 6%, 83%)
CMYK
cmyk(6%, 0%, 5%, 17%)
Oklch
oklch(85.5% 0.019 150.5)

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

#E1E4D1

Fresh Green · LightGray · Lemon Cream

HEX
#E1E4D1
RGB
rgb(225, 228, 209)
HSL
hsl(69, 26%, 86%)
HSB
hsb(69, 8%, 89%)
CMYK
cmyk(1%, 0%, 8%, 11%)
Oklch
oklch(91.1% 0.026 114.2)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#302D36

Deep Indigo · DarkSlateGray · Dark Stone

HEX
#302D36
RGB
rgb(48, 45, 54)
HSL
hsl(260, 9%, 19%)
HSB
hsb(260, 17%, 21%)
CMYK
cmyk(11%, 17%, 0%, 79%)
Oklch
oklch(30.4% 0.016 300.6)

Traditional「Deep Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADB0BF
BEBBAC

Analogous

ACB8BE
ADB0BF
B2ACBE

Triadic

ADB0BF
BEACAF
AFBEAC

Split-Comp.

ADB0BF
BEB2AC
B8BEAC

Tetradic

ADB0BF
BEACB8
BEBBAC
ACBEB2

Contrast Matrix WCAG 2.1 Contrast

ADB0BF
BAC2C4
C7D3C9
E1E4D1
302D36
—
1.2
Fail
1.4
Fail
1.7
Fail
6.3
AA
1.2
Fail
—
1.2
Fail
1.4
Fail
7.5
AAA
1.4
Fail
1.2
Fail
—
1.2
Fail
8.7
AAA
1.7
Fail
1.4
Fail
1.2
Fail
—
10.4
AAA
6.3
AA
7.5
AAA
8.7
AAA
10.4
AAA
—
White BG
2.2Fail
1.8Fail
1.5Fail
1.3Fail
13.5AAA
Black BG
9.7AAA
11.6AAA
13.6AAA
16.2AAA
1.6Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAEBB
BDBEC4
CCCCCB
E2E2D6
2F2F34

Deuteranopia

AEAEBB
BDBCC3
CCCBCC
E2E2D7
2F2F33

Tritanopia

ADB9B8
BAC3C3
C8CDCE
E1D9DA
303232

Achromatopsia

B1B1B1
C0C0C0
CECECE
E1E1E1
2F2F2F

Shades & Tints Shades & Tints

#ADB0BF

Dark
Light

#BAC2C4

Dark
Light

#C7D3C9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #adb0bf;
  --color-2: #bac2c4;
  --color-3: #c7d3c9;
  --color-4: #e1e4d1;
  --color-5: #302d36;
}

SCSS

$color-1: #adb0bf;
$color-2: #bac2c4;
$color-3: #c7d3c9;
$color-4: #e1e4d1;
$color-5: #302d36;

TAILWIND

colors: {
  'brand-1': '#adb0bf',
  'brand-2': '#bac2c4',
  'brand-3': '#c7d3c9',
  'brand-4': '#e1e4d1',
  'brand-5': '#302d36',
}

RGB Array

[173, 176, 191], [186, 194, 196], [199, 211, 201], [225, 228, 209], [48, 45, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #ADB0BF, #BAC2C4, #C7D3C9, #E1E4D1, #302D36 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #adb0bf; --color-2: #bac2c4; --color-3: #c7d3c9; --color-4: #e1e4d1; --color-5: #302d36. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 earth-style 5-color scheme is especially suited for beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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