← Back to Editor

#FAAC6C · #C68C69 · #97706A · #655268 · #333366

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

#FAAC6C

Apricot · SandyBrown · Warm Sun

HEX
#FAAC6C
RGB
rgb(250, 172, 108)
HSL
hsl(27, 93%, 70%)
HSB
hsb(27, 57%, 98%)
CMYK
cmyk(0%, 31%, 57%, 2%)
Oklch
oklch(80.7% 0.122 59.2)

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

#C68C69

Tangerine · DarkSalmon · Warm Sun

HEX
#C68C69
RGB
rgb(198, 140, 105)
HSL
hsl(23, 45%, 59%)
HSB
hsb(23, 47%, 78%)
CMYK
cmyk(0%, 29%, 47%, 22%)
Oklch
oklch(68.9% 0.086 51.9)

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

#97706A

Crimson · Gray · Passion Red

HEX
#97706A
RGB
rgb(151, 112, 106)
HSL
hsl(8, 18%, 50%)
HSB
hsb(8, 30%, 59%)
CMYK
cmyk(0%, 26%, 30%, 41%)
Oklch
oklch(58.3% 0.051 28.6)

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

#655268

Dark Plum · DimGray · Eggplant

HEX
#655268
RGB
rgb(101, 82, 104)
HSL
hsl(292, 12%, 36%)
HSB
hsb(292, 21%, 41%)
CMYK
cmyk(3%, 21%, 0%, 59%)
Oklch
oklch(46.6% 0.042 321.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#333366

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#333366
RGB
rgb(51, 51, 102)
HSL
hsl(240, 33%, 30%)
HSB
hsb(240, 50%, 40%)
CMYK
cmyk(50%, 50%, 0%, 60%)
Oklch
oklch(34.9% 0.087 280.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FAAC6C
6BBAFA

Analogous

FA6B72
FAAC6C
FAF36B

Triadic

FAAC6C
6BFAAB
AB6BFA

Split-Comp.

FAAC6C
6BFAF3
6B72FA

Tetradic

FAAC6C
72FA6B
6BBAFA
F36BFA

Contrast Matrix WCAG 2.1 Contrast

FAAC6C
C68C69
97706A
655268
333366
—
1.5
Fail
2.3
Fail
3.8
AA Large
6.2
AA
1.5
Fail
—
1.5
Fail
2.5
Fail
4.1
AA Large
2.3
Fail
1.5
Fail
—
1.6
Fail
2.7
Fail
3.8
AA Large
2.5
Fail
1.6
Fail
—
1.6
Fail
6.2
AA
4.1
AA Large
2.7
Fail
1.6
Fail
—
White BG
1.9Fail
2.9Fail
4.3AA Large
7.1AAA
11.6AAA
Black BG
11.2AAA
7.4AAA
4.8AA
3.0Fail
1.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D8D87B
ADAC71
86866B
5D5D63
33335A

Deuteranopia

DDE37F
B0B574
888B6C
5E5F61
333357

Tritanopia

F6888A
C3787A
956D6D
645E5E
33504E

Achromatopsia

BCBCBC
999999
7B7B7B
5A5A5A
393939

Shades & Tints Shades & Tints

#FAAC6C

Dark
Light

#C68C69

Dark
Light

#97706A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #faac6c;
  --color-2: #c68c69;
  --color-3: #97706a;
  --color-4: #655268;
  --color-5: #333366;
}

SCSS

$color-1: #faac6c;
$color-2: #c68c69;
$color-3: #97706a;
$color-4: #655268;
$color-5: #333366;

TAILWIND

colors: {
  'brand-1': '#faac6c',
  'brand-2': '#c68c69',
  'brand-3': '#97706a',
  'brand-4': '#655268',
  'brand-5': '#333366',
}

RGB Array

[250, 172, 108], [198, 140, 105], [151, 112, 106], [101, 82, 104], [51, 51, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FAAC6C, #C68C69, #97706A, #655268, #333366 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: #faac6c; --color-2: #c68c69; --color-3: #97706a; --color-4: #655268; --color-5: #333366. 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