← Back to Editor

#52A7A2 · #222E24 · #EF7303 · #DDA943 · #EDE2C2

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 LibraryData Visualization

Color Details Color Details

#52A7A2

Mineral Blue · CadetBlue · Mint Ice

HEX
#52A7A2
RGB
rgb(82, 167, 162)
HSL
hsl(176, 34%, 49%)
HSB
hsb(176, 51%, 65%)
CMYK
cmyk(51%, 0%, 3%, 35%)
Oklch
oklch(67.4% 0.083 190.3)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#222E24

Celadon · DarkSlateGray · Dark Green

HEX
#222E24
RGB
rgb(34, 46, 36)
HSL
hsl(130, 15%, 16%)
HSB
hsb(130, 26%, 18%)
CMYK
cmyk(26%, 0%, 22%, 82%)
Oklch
oklch(28.7% 0.024 149.6)

Traditional「Celadon」· Paint「Dark Green」· Creative Blush Sunrise

#EF7303

Tangerine · Chocolate · Amber Brown

HEX
#EF7303
RGB
rgb(239, 115, 3)
HSL
hsl(28, 98%, 47%)
HSB
hsb(28, 99%, 94%)
CMYK
cmyk(0%, 52%, 99%, 6%)
Oklch
oklch(69.0% 0.180 50.8)

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

#DDA943

Ginger · GoldenRod · Sunflower

HEX
#DDA943
RGB
rgb(221, 169, 67)
HSL
hsl(40, 69%, 56%)
HSB
hsb(40, 70%, 87%)
CMYK
cmyk(0%, 24%, 70%, 13%)
Oklch
oklch(76.5% 0.131 81.1)

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

#EDE2C2

Goose Yellow · Wheat · Lemon Cream

HEX
#EDE2C2
RGB
rgb(237, 226, 194)
HSL
hsl(45, 54%, 85%)
HSB
hsb(45, 18%, 93%)
CMYK
cmyk(0%, 5%, 18%, 7%)
Oklch
oklch(91.3% 0.044 91.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

52A7A2
A75258

Analogous

52A777
52A7A2
5283A7

Triadic

52A7A2
A252A7
A7A252

Split-Comp.

52A7A2
A75283
A77752

Tetradic

52A7A2
7752A7
A75258
83A752

Contrast Matrix WCAG 2.1 Contrast

52A7A2
222E24
EF7303
DDA943
EDE2C2
—
5.0
AA
1.0
Fail
1.3
Fail
2.2
Fail
5.0
AA
—
4.8
AA
6.6
AA
11.0
AAA
1.0
Fail
4.8
AA
—
1.4
Fail
2.3
Fail
1.3
Fail
6.6
AA
1.4
Fail
—
1.7
Fail
2.2
Fail
11.0
AAA
2.3
Fail
1.7
Fail
—
White BG
2.8Fail
14.1AAA
2.9Fail
2.1Fail
1.3Fail
Black BG
7.4AAA
1.5Fail
7.1AAA
9.8AAA
16.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7778A3
272726
B9B81E
C6C65C
E8E8CA

Deuteranopia

726CA4
272627
C1CA25
CACD62
E9EACC

Tritanopia

56A4A4
232829
E93338
DA6F73
ECD0D1

Achromatopsia

8D8D8D
292929
8B8B8B
ADADAD
E2E2E2

Shades & Tints Shades & Tints

#52A7A2

Dark
Light

#222E24

Dark
Light

#EF7303

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #52a7a2;
  --color-2: #222e24;
  --color-3: #ef7303;
  --color-4: #dda943;
  --color-5: #ede2c2;
}

SCSS

$color-1: #52a7a2;
$color-2: #222e24;
$color-3: #ef7303;
$color-4: #dda943;
$color-5: #ede2c2;

TAILWIND

colors: {
  'brand-1': '#52a7a2',
  'brand-2': '#222e24',
  'brand-3': '#ef7303',
  'brand-4': '#dda943',
  'brand-5': '#ede2c2',
}

RGB Array

[82, 167, 162], [34, 46, 36], [239, 115, 3], [221, 169, 67], [237, 226, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #52A7A2, #222E24, #EF7303, #DDA943, #EDE2C2 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: #52a7a2; --color-2: #222e24; --color-3: #ef7303; --color-4: #dda943; --color-5: #ede2c2. 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