← Back to Editor

#552C3A · #8068BE · #C06C86 · #F67A7A · #FBBA68

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

#552C3A

Dark Violet · DarkSlateGray · Raspberry

HEX
#552C3A
RGB
rgb(85, 44, 58)
HSL
hsl(340, 32%, 25%)
HSB
hsb(340, 48%, 33%)
CMYK
cmyk(0%, 48%, 32%, 67%)
Oklch
oklch(35.1% 0.063 359.0)

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

#8068BE

Deep Indigo · SlateBlue · Navy Blue

HEX
#8068BE
RGB
rgb(128, 104, 190)
HSL
hsl(257, 40%, 58%)
HSB
hsb(257, 45%, 75%)
CMYK
cmyk(33%, 45%, 0%, 25%)
Oklch
oklch(57.8% 0.130 294.9)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#C06C86

Dark Violet · LightCoral · Rose Pink

HEX
#C06C86
RGB
rgb(192, 108, 134)
HSL
hsl(341, 40%, 59%)
HSB
hsb(341, 44%, 75%)
CMYK
cmyk(0%, 44%, 30%, 25%)
Oklch
oklch(63.3% 0.110 0.9)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F67A7A

Peach Pink · LightCoral · Coral Red

HEX
#F67A7A
RGB
rgb(246, 122, 122)
HSL
hsl(0, 87%, 72%)
HSB
hsb(0, 50%, 96%)
CMYK
cmyk(0%, 50%, 50%, 4%)
Oklch
oklch(72.2% 0.152 21.6)

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

#FBBA68

Ginger · SandyBrown · Warm Sun

HEX
#FBBA68
RGB
rgb(251, 186, 104)
HSL
hsl(33, 95%, 70%)
HSB
hsb(33, 59%, 98%)
CMYK
cmyk(0%, 26%, 59%, 2%)
Oklch
oklch(83.3% 0.124 71.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

552C3A
2B5447

Analogous

542B4D
552C3A
54322B

Triadic

552C3A
39542B
2B3954

Split-Comp.

552C3A
2B5432
2B4D54

Tetradic

552C3A
4D542B
2B5447
322B54

Contrast Matrix WCAG 2.1 Contrast

552C3A
8068BE
C06C86
F67A7A
FBBA68
—
2.6
Fail
3.2
AA Large
4.4
AA Large
6.8
AA
2.6
Fail
—
1.2
Fail
1.7
Fail
2.7
Fail
3.2
AA Large
1.2
Fail
—
1.4
Fail
2.2
Fail
4.4
AA Large
1.7
Fail
1.4
Fail
—
1.5
Fail
6.8
AA
2.7
Fail
2.2
Fail
1.5
Fail
—
White BG
11.6AAA
4.5AA
3.7AA Large
2.6Fail
1.7Fail
Black BG
1.8Fail
4.6AA
5.7AA
8.0AAA
12.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

434337
7675A9
9C9B80
C0BF7A
DFDE7C

Deuteranopia

464936
7779A4
A1A77E
C8D17A
E3E881

Tritanopia

533433
7F9995
BC7B7A
F07A7A
F88C8F

Achromatopsia

3A3A3A
797979
888888
9F9F9F
C4C4C4

Shades & Tints Shades & Tints

#552C3A

Dark
Light

#8068BE

Dark
Light

#C06C86

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #552c3a;
  --color-2: #8068be;
  --color-3: #c06c86;
  --color-4: #f67a7a;
  --color-5: #fbba68;
}

SCSS

$color-1: #552c3a;
$color-2: #8068be;
$color-3: #c06c86;
$color-4: #f67a7a;
$color-5: #fbba68;

TAILWIND

colors: {
  'brand-1': '#552c3a',
  'brand-2': '#8068be',
  'brand-3': '#c06c86',
  'brand-4': '#f67a7a',
  'brand-5': '#fbba68',
}

RGB Array

[85, 44, 58], [128, 104, 190], [192, 108, 134], [246, 122, 122], [251, 186, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #552C3A, #8068BE, #C06C86, #F67A7A, #FBBA68 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: #552c3a; --color-2: #8068be; --color-3: #c06c86; --color-4: #f67a7a; --color-5: #fbba68. 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