← Back to Editor

#796F65 · #438FC0 · #88CDF6 · #B4E1FE · #CEEBFD

earth

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#796F65

Ochre · DimGray · Warm Gray

HEX
#796F65
RGB
rgb(121, 111, 101)
HSL
hsl(30, 9%, 44%)
HSB
hsb(30, 17%, 47%)
CMYK
cmyk(0%, 8%, 17%, 53%)
Oklch
oklch(54.8% 0.020 67.4)

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

#438FC0

Slate Blue · SteelBlue · Navy Blue

HEX
#438FC0
RGB
rgb(67, 143, 192)
HSL
hsl(204, 50%, 51%)
HSB
hsb(204, 65%, 75%)
CMYK
cmyk(65%, 26%, 0%, 25%)
Oklch
oklch(62.3% 0.105 239.8)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#88CDF6

Sky Blue · LightSkyBlue · Cobalt Blue

HEX
#88CDF6
RGB
rgb(136, 205, 246)
HSL
hsl(202, 86%, 75%)
HSB
hsb(202, 45%, 96%)
CMYK
cmyk(45%, 17%, 0%, 4%)
Oklch
oklch(81.7% 0.090 235.5)

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

#B4E1FE

Sky Blue · LightBlue · Sky Blue

HEX
#B4E1FE
RGB
rgb(180, 225, 254)
HSL
hsl(204, 97%, 85%)
HSB
hsb(204, 29%, 100%)
CMYK
cmyk(29%, 11%, 0%, 0%)
Oklch
oklch(88.8% 0.062 236.7)

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

#CEEBFD

Sky Blue · Lavender · Sky Blue

HEX
#CEEBFD
RGB
rgb(206, 235, 253)
HSL
hsl(203, 92%, 90%)
HSB
hsb(203, 19%, 99%)
CMYK
cmyk(19%, 7%, 0%, 1%)
Oklch
oklch(92.5% 0.039 235.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

796F65
66707A

Analogous

7A6666
796F65
7A7A66

Triadic

796F65
667A70
70667A

Split-Comp.

796F65
667A7A
66667A

Tetradic

796F65
667A66
66707A
7A667A

Contrast Matrix WCAG 2.1 Contrast

796F65
438FC0
88CDF6
B4E1FE
CEEBFD
—
1.4
Fail
2.8
Fail
3.5
AA Large
4.0
AA Large
1.4
Fail
—
2.0
Fail
2.6
Fail
2.9
Fail
2.8
Fail
2.0
Fail
—
1.3
Fail
1.4
Fail
3.5
AA Large
2.6
Fail
1.3
Fail
—
1.1
Fail
4.0
AA Large
2.9
Fail
1.4
Fail
1.1
Fail
—
White BG
4.9AA
3.5AA Large
1.7Fail
1.4Fail
1.2Fail
Black BG
4.3AA Large
5.9AA
12.1AAA
15.1AAA
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

757567
6465B4
A6A6EC
C7C8F7
DBDBF9

Deuteranopia

757668
605AB1
A29DEA
C5C2F5
D9D7F8

Tritanopia

78696A
47ABA9
8BE4E3
B6F1F0
CFF5F4

Achromatopsia

717171
7E7E7E
BDBDBD
D7D7D7
E4E4E4

Shades & Tints Shades & Tints

#796F65

Dark
Light

#438FC0

Dark
Light

#88CDF6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #796f65;
  --color-2: #438fc0;
  --color-3: #88cdf6;
  --color-4: #b4e1fe;
  --color-5: #ceebfd;
}

SCSS

$color-1: #796f65;
$color-2: #438fc0;
$color-3: #88cdf6;
$color-4: #b4e1fe;
$color-5: #ceebfd;

TAILWIND

colors: {
  'brand-1': '#796f65',
  'brand-2': '#438fc0',
  'brand-3': '#88cdf6',
  'brand-4': '#b4e1fe',
  'brand-5': '#ceebfd',
}

RGB Array

[121, 111, 101], [67, 143, 192], [136, 205, 246], [180, 225, 254], [206, 235, 253]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This earth-style palette of #796F65, #438FC0, #88CDF6, #B4E1FE, #CEEBFD is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #796f65; --color-2: #438fc0; --color-3: #88cdf6; --color-4: #b4e1fe; --color-5: #ceebfd. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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