#52C2E8 + #86A1AA + #D97B24 + #DE5A34 + #796B4E · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#52C2E8

Sky Blue · MediumTurquoise · Lake Green

HEX

#52C2E8

RGB

rgb(82, 194, 232)

HSL

hsl(195, 77%, 62%)

HSB

hsb(195, 65%, 91%)

CMYK

cmyk(65%, 16%, 0%, 9%)

Oklch

oklch(76.5% 0.114 223.8)

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

#86A1AA

Slate Blue · LightSlateGray · Lake Green

HEX

#86A1AA

RGB

rgb(134, 161, 170)

HSL

hsl(195, 17%, 60%)

HSB

hsb(195, 21%, 67%)

CMYK

cmyk(21%, 5%, 0%, 33%)

Oklch

oklch(69.1% 0.033 220.0)

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

#D97B24

Tangerine · Chocolate · Amber Brown

HEX

#D97B24

RGB

rgb(217, 123, 36)

HSL

hsl(29, 72%, 50%)

HSB

hsb(29, 83%, 85%)

CMYK

cmyk(0%, 43%, 83%, 15%)

Oklch

oklch(67.4% 0.149 57.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#DE5A34

Vermilion · Chocolate · Passion Red

HEX

#DE5A34

RGB

rgb(222, 90, 52)

HSL

hsl(13, 72%, 54%)

HSB

hsb(13, 77%, 87%)

CMYK

cmyk(0%, 59%, 77%, 13%)

Oklch

oklch(63.2% 0.174 36.6)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#796B4E

Ochre · DimGray · Honey Gold

HEX

#796B4E

RGB

rgb(121, 107, 78)

HSL

hsl(40, 22%, 39%)

HSB

hsb(40, 36%, 47%)

CMYK

cmyk(0%, 12%, 36%, 53%)

Oklch

oklch(53.3% 0.046 85.1)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

52C2E8

E97953

Analogous

53E9C3

52C2E8

5379E9

Triadic

52C2E8

E953C3

C3E953

Split-Comp.

52C2E8

E95379

E9C353

Tetradic

52C2E8

C353E9

E97953

79E953

Contrast Matrix WCAG 2.1 Contrast

52C2E8	86A1AA	D97B24	DE5A34	796B4E
—	1.3 Fail	1.5 Fail	1.8 Fail	2.5 Fail
1.3 Fail	—	1.1 Fail	1.4 Fail	1.9 Fail
1.5 Fail	1.1 Fail	—	1.2 Fail	1.7 Fail
1.8 Fail	1.4 Fail	1.2 Fail	—	1.4 Fail
2.5 Fail	1.9 Fail	1.7 Fail	1.4 Fail	—

White BG

2.1Fail

2.7Fail

3.1AA Large

3.7AA Large

5.2AA

Black BG

10.2AAA

7.7AAA

6.8AA

5.6AA

4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

8284DF

9292A8

B0AF39

A5A43D

737355

Deuteranopia

7C74DD

908EA7

B6BD3E

ADB63F

747557

Tritanopia

58D8D6

87A6A6

D44A4D

D74446

785B5C

Achromatopsia

A5A5A5

9A9A9A

8D8D8D

7D7D7D

6C6C6C

Shades & Tints Shades & Tints

#52C2E8

Dark

Light

#86A1AA

Dark

Light

#D97B24

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #52c2e8;
  --color-2: #86a1aa;
  --color-3: #d97b24;
  --color-4: #de5a34;
  --color-5: #796b4e;
}

SCSS

$color-1: #52c2e8;
$color-2: #86a1aa;
$color-3: #d97b24;
$color-4: #de5a34;
$color-5: #796b4e;

TAILWIND

colors: {
  'brand-1': '#52c2e8',
  'brand-2': '#86a1aa',
  'brand-3': '#d97b24',
  'brand-4': '#de5a34',
  'brand-5': '#796b4e',
}

RGB Array

[82, 194, 232], [134, 161, 170], [217, 123, 36], [222, 90, 52], [121, 107, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #52C2E8, #86A1AA, #D97B24, #DE5A34, #796B4E 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: #52c2e8; --color-2: #86a1aa; --color-3: #d97b24; --color-4: #de5a34; --color-5: #796b4e. 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 sunset-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