← Back to Editor

#77835E · #4A5435 · #58DBDD · #B5EBEC · #E4F8F8

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#77835E

Grass Green · DimGray · Olive Green

HEX
#77835E
RGB
rgb(119, 131, 94)
HSL
hsl(79, 16%, 44%)
HSB
hsb(79, 28%, 51%)
CMYK
cmyk(9%, 0%, 28%, 49%)
Oklch
oklch(59.0% 0.056 122.7)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#4A5435

Grass Green · DarkOliveGreen · Forest Green

HEX
#4A5435
RGB
rgb(74, 84, 53)
HSL
hsl(79, 23%, 27%)
HSB
hsb(79, 37%, 33%)
CMYK
cmyk(12%, 0%, 37%, 67%)
Oklch
oklch(42.8% 0.050 123.0)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

#58DBDD

Sky Blue · MediumTurquoise · Lake Green

HEX
#58DBDD
RGB
rgb(88, 219, 221)
HSL
hsl(181, 66%, 61%)
HSB
hsb(181, 60%, 87%)
CMYK
cmyk(60%, 1%, 0%, 13%)
Oklch
oklch(82.1% 0.114 196.6)

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

#B5EBEC

Sky Blue · LightBlue · Glacier Blue

HEX
#B5EBEC
RGB
rgb(181, 235, 236)
HSL
hsl(181, 59%, 82%)
HSB
hsb(181, 23%, 93%)
CMYK
cmyk(23%, 0%, 0%, 7%)
Oklch
oklch(90.3% 0.055 197.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#E4F8F8

Sky Blue · Lavender · Glacier Blue

HEX
#E4F8F8
RGB
rgb(228, 248, 248)
HSL
hsl(180, 59%, 93%)
HSB
hsb(180, 8%, 97%)
CMYK
cmyk(8%, 0%, 0%, 3%)
Oklch
oklch(96.4% 0.021 196.8)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

77835E
6A5E82

Analogous

827C5E
77835E
65825E

Triadic

77835E
5E7782
825E77

Split-Comp.

77835E
5E6582
7C5E82

Tetradic

77835E
5E827C
6A5E82
825E65

Contrast Matrix WCAG 2.1 Contrast

77835E
4A5435
58DBDD
B5EBEC
E4F8F8
—
2.0
Fail
2.4
Fail
3.1
AA Large
3.7
AA Large
2.0
Fail
—
4.8
AA
6.2
AA
7.3
AAA
2.4
Fail
4.8
AA
—
1.3
Fail
1.5
Fail
3.1
AA Large
6.2
AA
1.3
Fail
—
1.2
Fail
3.7
AA Large
7.3
AAA
1.5
Fail
1.2
Fail
—
White BG
4.0AA Large
8.0AAA
1.7Fail
1.3Fail
1.1Fail
Black BG
5.2AA
2.6Fail
12.6AAA
16.1AAA
19.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7C7C67
4E4E3D
9192DD
CCCDEC
EDEDF8

Deuteranopia

7C7B69
4E4D3E
897FDC
C9C5EC
ECEAF8

Tritanopia

786E70
4B4244
5FDCDC
B8ECEC
E5F8F8

Achromatopsia

7B7B7B
4D4D4D
B4B4B4
DBDBDB
F2F2F2

Shades & Tints Shades & Tints

#77835E

Dark
Light

#4A5435

Dark
Light

#58DBDD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #77835e;
  --color-2: #4a5435;
  --color-3: #58dbdd;
  --color-4: #b5ebec;
  --color-5: #e4f8f8;
}

SCSS

$color-1: #77835e;
$color-2: #4a5435;
$color-3: #58dbdd;
$color-4: #b5ebec;
$color-5: #e4f8f8;

TAILWIND

colors: {
  'brand-1': '#77835e',
  'brand-2': '#4a5435',
  'brand-3': '#58dbdd',
  'brand-4': '#b5ebec',
  'brand-5': '#e4f8f8',
}

RGB Array

[119, 131, 94], [74, 84, 53], [88, 219, 221], [181, 235, 236], [228, 248, 248]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #77835E, #4A5435, #58DBDD, #B5EBEC, #E4F8F8 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: #77835e; --color-2: #4a5435; --color-3: #58dbdd; --color-4: #b5ebec; --color-5: #e4f8f8. 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