← Back to Editor

#635552 · #AF4073 · #EA5A38 · #F6972D · #8BC4D8

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

#635552

Crimson · DimGray · Charcoal

HEX
#635552
RGB
rgb(99, 85, 82)
HSL
hsl(11, 9%, 35%)
HSB
hsb(11, 17%, 39%)
CMYK
cmyk(0%, 14%, 17%, 61%)
Oklch
oklch(46.2% 0.019 32.1)

Traditional「Crimson」· Paint「Charcoal」· Creative Midnight Shadow

#AF4073

Dark Violet · MediumVioletRed · Camellia

HEX
#AF4073
RGB
rgb(175, 64, 115)
HSL
hsl(332, 46%, 47%)
HSB
hsb(332, 63%, 69%)
CMYK
cmyk(0%, 63%, 34%, 31%)
Oklch
oklch(54.0% 0.153 355.0)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#EA5A38

Vermilion · Tomato · Passion Red

HEX
#EA5A38
RGB
rgb(234, 90, 56)
HSL
hsl(11, 81%, 57%)
HSB
hsb(11, 76%, 92%)
CMYK
cmyk(0%, 62%, 76%, 8%)
Oklch
oklch(65.1% 0.185 34.6)

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

#F6972D

Ginger · GoldenRod · Warm Sun

HEX
#F6972D
RGB
rgb(246, 151, 45)
HSL
hsl(32, 92%, 57%)
HSB
hsb(32, 82%, 96%)
CMYK
cmyk(0%, 39%, 82%, 4%)
Oklch
oklch(75.9% 0.159 62.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#8BC4D8

Sky Blue · SkyBlue · Lake Green

HEX
#8BC4D8
RGB
rgb(139, 196, 216)
HSL
hsl(196, 50%, 70%)
HSB
hsb(196, 36%, 85%)
CMYK
cmyk(36%, 9%, 0%, 15%)
Oklch
oklch(78.8% 0.065 221.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

635552
515E61

Analogous

615156
635552
615C51

Triadic

635552
516154
545161

Split-Comp.

635552
51615C
515661

Tetradic

635552
566151
515E61
5C5161

Contrast Matrix WCAG 2.1 Contrast

635552
AF4073
EA5A38
F6972D
8BC4D8
—
1.3
Fail
2.0
Fail
3.2
AA Large
3.7
AA Large
1.3
Fail
—
1.6
Fail
2.5
Fail
2.9
Fail
2.0
Fail
1.6
Fail
—
1.6
Fail
1.8
Fail
3.2
AA Large
2.5
Fail
1.6
Fail
—
1.2
Fail
3.7
AA Large
2.9
Fail
1.8
Fail
1.2
Fail
—
White BG
7.1AAA
5.5AA
3.5AA Large
2.2Fail
1.9Fail
Black BG
3.0Fail
3.8AA Large
6.0AA
9.4AAA
11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5D5D53
7F7E67
ACAA40
CDCC47
A4A4D3

Deuteranopia

5E5F53
858E64
B4BF42
D2DA4D
A09CD2

Tritanopia

625353
A95D5B
E34748
F15B5F
8ECFCF

Achromatopsia

595959
676767
818181
A7A7A7
B5B5B5

Shades & Tints Shades & Tints

#635552

Dark
Light

#AF4073

Dark
Light

#EA5A38

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #635552;
  --color-2: #af4073;
  --color-3: #ea5a38;
  --color-4: #f6972d;
  --color-5: #8bc4d8;
}

SCSS

$color-1: #635552;
$color-2: #af4073;
$color-3: #ea5a38;
$color-4: #f6972d;
$color-5: #8bc4d8;

TAILWIND

colors: {
  'brand-1': '#635552',
  'brand-2': '#af4073',
  'brand-3': '#ea5a38',
  'brand-4': '#f6972d',
  'brand-5': '#8bc4d8',
}

RGB Array

[99, 85, 82], [175, 64, 115], [234, 90, 56], [246, 151, 45], [139, 196, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #635552, #AF4073, #EA5A38, #F6972D, #8BC4D8 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: #635552; --color-2: #af4073; --color-3: #ea5a38; --color-4: #f6972d; --color-5: #8bc4d8. 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