← Back to Editor

#33E1FF · #58A9B4 · #7D7169 · #B19F75 · #E5CC80

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 Library

Color Details Color Details

#33E1FF

Lake Blue · Turquoise · Lake Green

HEX
#33E1FF
RGB
rgb(51, 225, 255)
HSL
hsl(189, 100%, 60%)
HSB
hsb(189, 80%, 100%)
CMYK
cmyk(80%, 12%, 0%, 0%)
Oklch
oklch(83.9% 0.138 212.7)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#58A9B4

Slate Blue · CadetBlue · Lake Green

HEX
#58A9B4
RGB
rgb(88, 169, 180)
HSL
hsl(187, 38%, 53%)
HSB
hsb(187, 51%, 71%)
CMYK
cmyk(51%, 6%, 0%, 29%)
Oklch
oklch(68.8% 0.081 207.0)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#7D7169

Tangerine · DimGray · Warm Gray

HEX
#7D7169
RGB
rgb(125, 113, 105)
HSL
hsl(24, 9%, 45%)
HSB
hsb(24, 16%, 49%)
CMYK
cmyk(0%, 10%, 16%, 51%)
Oklch
oklch(55.7% 0.019 56.0)

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

#B19F75

Ginger · Tan · Sunflower

HEX
#B19F75
RGB
rgb(177, 159, 117)
HSL
hsl(42, 28%, 58%)
HSB
hsb(42, 34%, 69%)
CMYK
cmyk(0%, 10%, 34%, 31%)
Oklch
oklch(70.8% 0.061 87.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E5CC80

Ginger · BurlyWood · Sunflower

HEX
#E5CC80
RGB
rgb(229, 204, 128)
HSL
hsl(45, 66%, 70%)
HSB
hsb(45, 44%, 90%)
CMYK
cmyk(0%, 11%, 44%, 10%)
Oklch
oklch(85.0% 0.100 91.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33E1FF
FF5233

Analogous

33FFB8
33E1FF
337AFF

Triadic

33E1FF
FF33E0
E0FF33

Split-Comp.

33E1FF
FF337A
FFB833

Tetradic

33E1FF
B833FF
FF5233
7AFF33

Contrast Matrix WCAG 2.1 Contrast

33E1FF
58A9B4
7D7169
B19F75
E5CC80
—
1.7
Fail
3.0
AA Large
1.7
Fail
1.0
Fail
1.7
Fail
—
1.7
Fail
1.0
Fail
1.7
Fail
3.0
AA Large
1.7
Fail
—
1.8
Fail
3.0
Fail
1.7
Fail
1.0
Fail
1.8
Fail
—
1.6
Fail
1.0
Fail
1.7
Fail
3.0
Fail
1.6
Fail
—
White BG
1.6Fail
2.7Fail
4.7AA
2.6Fail
1.6Fail
Black BG
13.4AAA
7.7AAA
4.4AA Large
8.1AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7E80F8
7B7CB1
78786B
A9A97F
DADA92

Deuteranopia

7467F6
7670B1
79796B
AAAC82
DCDD97

Tritanopia

3CF2F1
5CAFAF
7C6C6D
B08789
E4A1A4

Achromatopsia

B0B0B0
929292
747474
A0A0A0
CBCBCB

Shades & Tints Shades & Tints

#33E1FF

Dark
Light

#58A9B4

Dark
Light

#7D7169

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33e1ff;
  --color-2: #58a9b4;
  --color-3: #7d7169;
  --color-4: #b19f75;
  --color-5: #e5cc80;
}

SCSS

$color-1: #33e1ff;
$color-2: #58a9b4;
$color-3: #7d7169;
$color-4: #b19f75;
$color-5: #e5cc80;

TAILWIND

colors: {
  'brand-1': '#33e1ff',
  'brand-2': '#58a9b4',
  'brand-3': '#7d7169',
  'brand-4': '#b19f75',
  'brand-5': '#e5cc80',
}

RGB Array

[51, 225, 255], [88, 169, 180], [125, 113, 105], [177, 159, 117], [229, 204, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #33E1FF, #58A9B4, #7D7169, #B19F75, #E5CC80 is ideal for: corporate websites, product showcases, portfolios. 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: #33e1ff; --color-2: #58a9b4; --color-3: #7d7169; --color-4: #b19f75; --color-5: #e5cc80. 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. 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