← Back to Editor

#63588C · #F1D999 · #F8A16D · #B25B61 · #A6799F

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

#63588C

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#63588C
RGB
rgb(99, 88, 140)
HSL
hsl(253, 23%, 45%)
HSB
hsb(253, 37%, 55%)
CMYK
cmyk(29%, 37%, 0%, 45%)
Oklch
oklch(49.3% 0.082 292.8)

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

#F1D999

Goose Yellow · Khaki · Lemon Cream

HEX
#F1D999
RGB
rgb(241, 217, 153)
HSL
hsl(44, 76%, 77%)
HSB
hsb(44, 37%, 95%)
CMYK
cmyk(0%, 10%, 37%, 5%)
Oklch
oklch(89.0% 0.086 89.8)

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

#F8A16D

Apricot · SandyBrown · Warm Sun

HEX
#F8A16D
RGB
rgb(248, 161, 109)
HSL
hsl(22, 91%, 70%)
HSB
hsb(22, 56%, 97%)
CMYK
cmyk(0%, 35%, 56%, 3%)
Oklch
oklch(78.5% 0.124 51.0)

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

#B25B61

Crimson · Sienna · Passion Red

HEX
#B25B61
RGB
rgb(178, 91, 97)
HSL
hsl(356, 36%, 53%)
HSB
hsb(356, 49%, 70%)
CMYK
cmyk(0%, 49%, 46%, 30%)
Oklch
oklch(57.6% 0.113 16.9)

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

#A6799F

Rose Purple · DarkGray · Violet

HEX
#A6799F
RGB
rgb(166, 121, 159)
HSL
hsl(309, 20%, 56%)
HSB
hsb(309, 27%, 65%)
CMYK
cmyk(0%, 27%, 4%, 35%)
Oklch
oklch(63.3% 0.077 331.9)

Traditional「Rose Purple」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

63588C
828D58

Analogous

58678D
63588C
7E588D

Triadic

63588C
8D6458
588D64

Split-Comp.

63588C
8D7E58
678D58

Tetradic

63588C
8D5867
828D58
588D7E

Contrast Matrix WCAG 2.1 Contrast

63588C
F1D999
F8A16D
B25B61
A6799F
—
4.6
AA
3.1
AA Large
1.4
Fail
1.8
Fail
4.6
AA
—
1.5
Fail
3.3
AA Large
2.6
Fail
3.1
AA Large
1.5
Fail
—
2.3
Fail
1.8
Fail
1.4
Fail
3.3
AA Large
2.3
Fail
—
1.3
Fail
1.8
Fail
2.6
Fail
1.8
Fail
1.3
Fail
—
White BG
6.4AA
1.4Fail
2.0Fail
4.6AA
3.6AA Large
Black BG
3.3AA Large
15.1AAA
10.3AAA
4.6AA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E7F
E7E6A8
D2D27A
8C8C60
939296

Deuteranopia

5F607C
E8EAAC
D7DE7D
91985F
959994

Tritanopia

627573
F0B5B7
F48486
AE5E5E
A48F8D

Achromatopsia

616161
D9D9D9
B5B5B5
767676
8B8B8B

Shades & Tints Shades & Tints

#63588C

Dark
Light

#F1D999

Dark
Light

#F8A16D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #63588c;
  --color-2: #f1d999;
  --color-3: #f8a16d;
  --color-4: #b25b61;
  --color-5: #a6799f;
}

SCSS

$color-1: #63588c;
$color-2: #f1d999;
$color-3: #f8a16d;
$color-4: #b25b61;
$color-5: #a6799f;

TAILWIND

colors: {
  'brand-1': '#63588c',
  'brand-2': '#f1d999',
  'brand-3': '#f8a16d',
  'brand-4': '#b25b61',
  'brand-5': '#a6799f',
}

RGB Array

[99, 88, 140], [241, 217, 153], [248, 161, 109], [178, 91, 97], [166, 121, 159]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #63588C, #F1D999, #F8A16D, #B25B61, #A6799F 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: #63588c; --color-2: #f1d999; --color-3: #f8a16d; --color-4: #b25b61; --color-5: #a6799f. 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