← Back to Editor

#F22B60 · #FC6787 · #D0B4A9 · #AC8A64 · #794F37

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F22B60

Dark Violet · Crimson · Rose Pink

HEX
#F22B60
RGB
rgb(242, 43, 96)
HSL
hsl(344, 88%, 56%)
HSB
hsb(344, 82%, 95%)
CMYK
cmyk(0%, 82%, 60%, 5%)
Oklch
oklch(62.8% 0.229 13.0)

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

#FC6787

Peach Pink · LightCoral · Coral Red

HEX
#FC6787
RGB
rgb(252, 103, 135)
HSL
hsl(347, 96%, 70%)
HSB
hsb(347, 59%, 99%)
CMYK
cmyk(0%, 59%, 46%, 1%)
Oklch
oklch(70.8% 0.183 9.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#D0B4A9

Apricot · Tan · Warm Sun

HEX
#D0B4A9
RGB
rgb(208, 180, 169)
HSL
hsl(17, 29%, 74%)
HSB
hsb(17, 19%, 82%)
CMYK
cmyk(0%, 13%, 19%, 18%)
Oklch
oklch(79.1% 0.036 42.7)

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

#AC8A64

Ginger · Gray · Warm Sun

HEX
#AC8A64
RGB
rgb(172, 138, 100)
HSL
hsl(32, 30%, 53%)
HSB
hsb(32, 42%, 67%)
CMYK
cmyk(0%, 20%, 42%, 33%)
Oklch
oklch(65.6% 0.067 69.4)

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

#794F37

Tangerine · Sienna · Amber Brown

HEX
#794F37
RGB
rgb(121, 79, 55)
HSL
hsl(22, 37%, 35%)
HSB
hsb(22, 55%, 47%)
CMYK
cmyk(0%, 35%, 55%, 53%)
Oklch
oklch(46.9% 0.067 50.2)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F22B60
2CF2BD

Analogous

F22CC3
F22B60
F25A2C

Triadic

F22B60
61F22C
2C61F2

Split-Comp.

F22B60
2CF25A
2CC3F2

Tetradic

F22B60
C3F22C
2CF2BD
5A2CF2

Contrast Matrix WCAG 2.1 Contrast

F22B60
FC6787
D0B4A9
AC8A64
794F37
—
1.4
Fail
2.0
Fail
1.2
Fail
1.8
Fail
1.4
Fail
—
1.5
Fail
1.1
Fail
2.5
Fail
2.0
Fail
1.5
Fail
—
1.6
Fail
3.6
AA Large
1.2
Fail
1.1
Fail
1.6
Fail
—
2.2
Fail
1.8
Fail
2.5
Fail
3.6
AA Large
2.2
Fail
—
White BG
4.0AA Large
2.8Fail
1.9Fail
3.2AA Large
7.0AAA
Black BG
5.3AA
7.4AAA
10.8AAA
6.6AA
3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9A53
BBBA7F
C4C4AC
9D9D6D
67663D

Deuteranopia

A7B650
C4CF7D
C6C8AC
9FA26F
696C3E

Tritanopia

E84947
F57978
CFAEAE
AA7476
774142

Achromatopsia

6D6D6D
979797
BBBBBB
909090
595959

Shades & Tints Shades & Tints

#F22B60

Dark
Light

#FC6787

Dark
Light

#D0B4A9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f22b60;
  --color-2: #fc6787;
  --color-3: #d0b4a9;
  --color-4: #ac8a64;
  --color-5: #794f37;
}

SCSS

$color-1: #f22b60;
$color-2: #fc6787;
$color-3: #d0b4a9;
$color-4: #ac8a64;
$color-5: #794f37;

TAILWIND

colors: {
  'brand-1': '#f22b60',
  'brand-2': '#fc6787',
  'brand-3': '#d0b4a9',
  'brand-4': '#ac8a64',
  'brand-5': '#794f37',
}

RGB Array

[242, 43, 96], [252, 103, 135], [208, 180, 169], [172, 138, 100], [121, 79, 55]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F22B60, #FC6787, #D0B4A9, #AC8A64, #794F37 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: #f22b60; --color-2: #fc6787; --color-3: #d0b4a9; --color-4: #ac8a64; --color-5: #794f37. 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