← Back to Editor

#F26864 · #C26861 · #829D7A · #ABB690 · #D4CFA4

skin

A 5-color skin 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

#F26864

Peach Pink · Salmon · Coral Red

HEX
#F26864
RGB
rgb(242, 104, 100)
HSL
hsl(2, 85%, 67%)
HSB
hsb(2, 59%, 95%)
CMYK
cmyk(0%, 57%, 59%, 5%)
Oklch
oklch(68.7% 0.171 24.3)

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

#C26861

Crimson · LightCoral · Passion Red

HEX
#C26861
RGB
rgb(194, 104, 97)
HSL
hsl(4, 44%, 57%)
HSB
hsb(4, 50%, 76%)
CMYK
cmyk(0%, 46%, 50%, 24%)
Oklch
oklch(61.9% 0.116 25.6)

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

#829D7A

Celadon · Gray · Olive Green

HEX
#829D7A
RGB
rgb(130, 157, 122)
HSL
hsl(106, 15%, 55%)
HSB
hsb(106, 22%, 62%)
CMYK
cmyk(17%, 0%, 22%, 38%)
Oklch
oklch(66.6% 0.059 138.6)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#ABB690

Willow Green · DarkGray · Apple Green

HEX
#ABB690
RGB
rgb(171, 182, 144)
HSL
hsl(77, 21%, 64%)
HSB
hsb(77, 21%, 71%)
CMYK
cmyk(6%, 0%, 21%, 29%)
Oklch
oklch(75.8% 0.054 120.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D4CFA4

Fresh Green · Tan · Sunflower

HEX
#D4CFA4
RGB
rgb(212, 207, 164)
HSL
hsl(54, 36%, 74%)
HSB
hsb(54, 23%, 83%)
CMYK
cmyk(0%, 2%, 23%, 17%)
Oklch
oklch(84.8% 0.057 102.0)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F26864
63EEF2

Analogous

F263A6
F26864
F2B063

Triadic

F26864
63F268
6863F2

Split-Comp.

F26864
63F2B0
63A6F2

Tetradic

F26864
A6F263
63EEF2
B063F2

Contrast Matrix WCAG 2.1 Contrast

F26864
C26861
829D7A
ABB690
D4CFA4
—
1.3
Fail
1.0
Fail
1.4
Fail
1.9
Fail
1.3
Fail
—
1.3
Fail
1.8
Fail
2.4
Fail
1.0
Fail
1.3
Fail
—
1.4
Fail
1.9
Fail
1.4
Fail
1.8
Fail
1.4
Fail
—
1.3
Fail
1.9
Fail
2.4
Fail
1.9
Fail
1.3
Fail
—
White BG
3.0AA Large
3.9AA Large
3.0Fail
2.1Fail
1.6Fail
Black BG
6.9AA
5.4AA
7.1AAA
9.8AAA
13.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B565
9B9A63
8E8E82
B0B099
D2D2AE

Deuteranopia

BEC965
A0A763
8C8A85
AFAE9B
D2D2B1

Tritanopia

EB6666
BD6464
83898B
ACA0A2
D4B7B8

Achromatopsia

919191
828282
919191
AEAEAE
CCCCCC

Shades & Tints Shades & Tints

#F26864

Dark
Light

#C26861

Dark
Light

#829D7A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f26864;
  --color-2: #c26861;
  --color-3: #829d7a;
  --color-4: #abb690;
  --color-5: #d4cfa4;
}

SCSS

$color-1: #f26864;
$color-2: #c26861;
$color-3: #829d7a;
$color-4: #abb690;
$color-5: #d4cfa4;

TAILWIND

colors: {
  'brand-1': '#f26864',
  'brand-2': '#c26861',
  'brand-3': '#829d7a',
  'brand-4': '#abb690',
  'brand-5': '#d4cfa4',
}

RGB Array

[242, 104, 100], [194, 104, 97], [130, 157, 122], [171, 182, 144], [212, 207, 164]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This skin-style palette of #F26864, #C26861, #829D7A, #ABB690, #D4CFA4 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: #f26864; --color-2: #c26861; --color-3: #829d7a; --color-4: #abb690; --color-5: #d4cfa4. 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 skin-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