← Back to Editor

#33353C · #F18C76 · #CCA287 · #A5B697 · #7EC7AE

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

#33353C

Indigo · DarkSlateGray · Dark Stone

HEX
#33353C
RGB
rgb(51, 53, 60)
HSL
hsl(227, 8%, 22%)
HSB
hsb(227, 15%, 24%)
CMYK
cmyk(15%, 12%, 0%, 76%)
Oklch
oklch(33.0% 0.013 273.0)

Traditional「Indigo」· Paint「Dark Stone」· Creative Midnight Shadow

#F18C76

Peach Pink · DarkSalmon · Coral Red

HEX
#F18C76
RGB
rgb(241, 140, 118)
HSL
hsl(11, 81%, 70%)
HSB
hsb(11, 51%, 95%)
CMYK
cmyk(0%, 42%, 51%, 5%)
Oklch
oklch(74.3% 0.128 33.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#CCA287

Apricot · Tan · Warm Sun

HEX
#CCA287
RGB
rgb(204, 162, 135)
HSL
hsl(23, 40%, 66%)
HSB
hsb(23, 34%, 80%)
CMYK
cmyk(0%, 21%, 34%, 20%)
Oklch
oklch(74.4% 0.062 54.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#A5B697

Celadon · DarkGray · Apple Green

HEX
#A5B697
RGB
rgb(165, 182, 151)
HSL
hsl(93, 18%, 65%)
HSB
hsb(93, 17%, 71%)
CMYK
cmyk(9%, 0%, 17%, 29%)
Oklch
oklch(75.5% 0.047 131.0)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#7EC7AE

Jade · MediumAquaMarine · Apple Green

HEX
#7EC7AE
RGB
rgb(126, 199, 174)
HSL
hsl(159, 39%, 64%)
HSB
hsb(159, 37%, 78%)
CMYK
cmyk(37%, 0%, 13%, 22%)
Oklch
oklch(77.4% 0.082 170.4)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

33353C
3D3B34

Analogous

343A3D
33353C
36343D

Triadic

33353C
3D3436
363D34

Split-Comp.

33353C
3D3634
3A3D34

Tetradic

33353C
3D343A
3D3B34
343D36

Contrast Matrix WCAG 2.1 Contrast

33353C
F18C76
CCA287
A5B697
7EC7AE
—
5.1
AA
5.3
AA
5.7
AA
6.2
AA
5.1
AA
—
1.0
Fail
1.1
Fail
1.2
Fail
5.3
AA
1.0
Fail
—
1.1
Fail
1.2
Fail
5.7
AA
1.1
Fail
1.1
Fail
—
1.1
Fail
6.2
AA
1.2
Fail
1.2
Fail
1.1
Fail
—
White BG
12.2AAA
2.4Fail
2.3Fail
2.2Fail
2.0Fail
Black BG
1.7Fail
8.8AAA
9.1AAA
9.7AAA
10.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

34343A
C5C47B
BAB98E
ACAD9F
9E9EB4

Deuteranopia

34343A
CBD37D
BCBF8F
ABAAA0
9994B6

Tritanopia

333939
EC8080
CA9394
A6A4A6
82B9BA

Achromatopsia

353535
A8A8A8
ABABAB
ADADAD
AEAEAE

Shades & Tints Shades & Tints

#33353C

Dark
Light

#F18C76

Dark
Light

#CCA287

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #33353c;
  --color-2: #f18c76;
  --color-3: #cca287;
  --color-4: #a5b697;
  --color-5: #7ec7ae;
}

SCSS

$color-1: #33353c;
$color-2: #f18c76;
$color-3: #cca287;
$color-4: #a5b697;
$color-5: #7ec7ae;

TAILWIND

colors: {
  'brand-1': '#33353c',
  'brand-2': '#f18c76',
  'brand-3': '#cca287',
  'brand-4': '#a5b697',
  'brand-5': '#7ec7ae',
}

RGB Array

[51, 53, 60], [241, 140, 118], [204, 162, 135], [165, 182, 151], [126, 199, 174]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #33353C, #F18C76, #CCA287, #A5B697, #7EC7AE 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: #33353c; --color-2: #f18c76; --color-3: #cca287; --color-4: #a5b697; --color-5: #7ec7ae. 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