← Back to Editor

#724F58 · #F77B78 · #C3B473 · #C2CB9D · #AFC1A8

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

#724F58

Crimson · DimGray · Wine Red

HEX
#724F58
RGB
rgb(114, 79, 88)
HSL
hsl(345, 18%, 38%)
HSB
hsb(345, 31%, 45%)
CMYK
cmyk(0%, 31%, 23%, 55%)
Oklch
oklch(46.8% 0.049 2.2)

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

#F77B78

Peach Pink · Salmon · Coral Red

HEX
#F77B78
RGB
rgb(247, 123, 120)
HSL
hsl(1, 89%, 72%)
HSB
hsb(1, 51%, 97%)
CMYK
cmyk(0%, 50%, 51%, 3%)
Oklch
oklch(72.5% 0.153 23.0)

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

#C3B473

Ginger · Tan · Sunflower

HEX
#C3B473
RGB
rgb(195, 180, 115)
HSL
hsl(49, 40%, 61%)
HSB
hsb(49, 41%, 76%)
CMYK
cmyk(0%, 8%, 41%, 24%)
Oklch
oklch(76.8% 0.086 96.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#C2CB9D

Willow Green · Tan · Apple Green

HEX
#C2CB9D
RGB
rgb(194, 203, 157)
HSL
hsl(72, 31%, 71%)
HSB
hsb(72, 23%, 80%)
CMYK
cmyk(4%, 0%, 23%, 20%)
Oklch
oklch(82.3% 0.063 116.8)

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

#AFC1A8

Celadon · DarkGray · Apple Green

HEX
#AFC1A8
RGB
rgb(175, 193, 168)
HSL
hsl(103, 17%, 71%)
HSB
hsb(103, 13%, 76%)
CMYK
cmyk(9%, 0%, 13%, 24%)
Oklch
oklch(79.0% 0.040 136.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

724F58
4F726A

Analogous

724F6A
724F58
72584F

Triadic

724F58
58724F
4F5872

Split-Comp.

724F58
4F7258
4F6A72

Tetradic

724F58
6A724F
4F726A
584F72

Contrast Matrix WCAG 2.1 Contrast

724F58
F77B78
C3B473
C2CB9D
AFC1A8
—
2.7
Fail
3.4
AA Large
4.1
AA Large
3.7
AA Large
2.7
Fail
—
1.3
Fail
1.5
Fail
1.4
Fail
3.4
AA Large
1.3
Fail
—
1.2
Fail
1.1
Fail
4.1
AA Large
1.5
Fail
1.2
Fail
—
1.1
Fail
3.7
AA Large
1.4
Fail
1.1
Fail
1.1
Fail
—
White BG
7.1AAA
2.6Fail
2.1Fail
1.7Fail
1.9Fail
Black BG
3.0Fail
8.1AAA
10.1AAA
12.3AAA
11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

636356
C1C079
BDBC83
C6C6A8
B7B7AE

Deuteranopia

656855
C9D279
BDBF87
C5C5AB
B6B4B0

Tritanopia

705454
F17979
C28F92
C2B1B3
B0B3B4

Achromatopsia

5A5A5A
A0A0A0
B1B1B1
C3C3C3
B9B9B9

Shades & Tints Shades & Tints

#724F58

Dark
Light

#F77B78

Dark
Light

#C3B473

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #724f58;
  --color-2: #f77b78;
  --color-3: #c3b473;
  --color-4: #c2cb9d;
  --color-5: #afc1a8;
}

SCSS

$color-1: #724f58;
$color-2: #f77b78;
$color-3: #c3b473;
$color-4: #c2cb9d;
$color-5: #afc1a8;

TAILWIND

colors: {
  'brand-1': '#724f58',
  'brand-2': '#f77b78',
  'brand-3': '#c3b473',
  'brand-4': '#c2cb9d',
  'brand-5': '#afc1a8',
}

RGB Array

[114, 79, 88], [247, 123, 120], [195, 180, 115], [194, 203, 157], [175, 193, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #724F58, #F77B78, #C3B473, #C2CB9D, #AFC1A8 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: #724f58; --color-2: #f77b78; --color-3: #c3b473; --color-4: #c2cb9d; --color-5: #afc1a8. 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