← Back to Editor

#FF0A4F · #D64757 · #BA6D67 · #AC816D · #ACA47C

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

#FF0A4F

Dark Violet · Crimson · Rose Pink

HEX
#FF0A4F
RGB
rgb(255, 10, 79)
HSL
hsl(343, 100%, 52%)
HSB
hsb(343, 96%, 100%)
CMYK
cmyk(0%, 96%, 69%, 0%)
Oklch
oklch(63.6% 0.252 17.4)

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

#D64757

Vermilion · Tomato · Passion Red

HEX
#D64757
RGB
rgb(214, 71, 87)
HSL
hsl(353, 64%, 56%)
HSB
hsb(353, 67%, 84%)
CMYK
cmyk(0%, 67%, 59%, 16%)
Oklch
oklch(60.2% 0.178 18.0)

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

#BA6D67

Crimson · LightCoral · Passion Red

HEX
#BA6D67
RGB
rgb(186, 109, 103)
HSL
hsl(4, 38%, 57%)
HSB
hsb(4, 45%, 73%)
CMYK
cmyk(0%, 41%, 45%, 27%)
Oklch
oklch(61.8% 0.099 25.1)

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

#AC816D

Tangerine · Gray · Warm Sun

HEX
#AC816D
RGB
rgb(172, 129, 109)
HSL
hsl(19, 28%, 55%)
HSB
hsb(19, 37%, 67%)
CMYK
cmyk(0%, 25%, 37%, 33%)
Oklch
oklch(64.0% 0.061 46.1)

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

#ACA47C

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#ACA47C
RGB
rgb(172, 164, 124)
HSL
hsl(50, 22%, 58%)
HSB
hsb(50, 28%, 67%)
CMYK
cmyk(0%, 5%, 28%, 33%)
Oklch
oklch(71.5% 0.056 98.1)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF0A4F
0AFFBA

Analogous

FF0ACA
FF0A4F
FF3F0A

Triadic

FF0A4F
50FF0A
0A50FF

Split-Comp.

FF0A4F
0AFF3F
0ACAFF

Tetradic

FF0A4F
CAFF0A
0AFFBA
3F0AFF

Contrast Matrix WCAG 2.1 Contrast

FF0A4F
D64757
BA6D67
AC816D
ACA47C
—
1.1
Fail
1.0
Fail
1.1
Fail
1.5
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.7
Fail
1.0
Fail
1.1
Fail
—
1.1
Fail
1.5
Fail
1.1
Fail
1.2
Fail
1.1
Fail
—
1.4
Fail
1.5
Fail
1.7
Fail
1.5
Fail
1.4
Fail
—
White BG
3.9AA Large
4.3AA Large
3.8AA Large
3.4AA Large
2.5Fail
Black BG
5.4AA
4.9AA
5.5AA
6.1AA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

95933E
989753
999868
999972
A9A886

Deuteranopia

A3B63A
A0AB52
9DA369
9C9F73
A9AA88

Tritanopia

F3312E
CF504F
B66A6A
AA7677
AC8D8F

Achromatopsia

5B5B5B
747474
838383
8C8C8C
A2A2A2

Shades & Tints Shades & Tints

#FF0A4F

Dark
Light

#D64757

Dark
Light

#BA6D67

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff0a4f;
  --color-2: #d64757;
  --color-3: #ba6d67;
  --color-4: #ac816d;
  --color-5: #aca47c;
}

SCSS

$color-1: #ff0a4f;
$color-2: #d64757;
$color-3: #ba6d67;
$color-4: #ac816d;
$color-5: #aca47c;

TAILWIND

colors: {
  'brand-1': '#ff0a4f',
  'brand-2': '#d64757',
  'brand-3': '#ba6d67',
  'brand-4': '#ac816d',
  'brand-5': '#aca47c',
}

RGB Array

[255, 10, 79], [214, 71, 87], [186, 109, 103], [172, 129, 109], [172, 164, 124]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF0A4F, #D64757, #BA6D67, #AC816D, #ACA47C 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: #ff0a4f; --color-2: #d64757; --color-3: #ba6d67; --color-4: #ac816d; --color-5: #aca47c. 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