← Back to Editor

#FF3D4A · #FF7863 · #AB795B · #7F8070 · #659694

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

#FF3D4A

Peach Pink · Tomato · Coral Red

HEX
#FF3D4A
RGB
rgb(255, 61, 74)
HSL
hsl(356, 100%, 62%)
HSB
hsb(356, 76%, 100%)
CMYK
cmyk(0%, 76%, 71%, 0%)
Oklch
oklch(65.9% 0.228 23.0)

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

#FF7863

Peach Pink · Salmon · Coral Red

HEX
#FF7863
RGB
rgb(255, 120, 99)
HSL
hsl(8, 100%, 69%)
HSB
hsb(8, 61%, 100%)
CMYK
cmyk(0%, 53%, 61%, 0%)
Oklch
oklch(72.8% 0.169 30.6)

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

#AB795B

Tangerine · Gray · Warm Sun

HEX
#AB795B
RGB
rgb(171, 121, 91)
HSL
hsl(23, 32%, 51%)
HSB
hsb(23, 47%, 67%)
CMYK
cmyk(0%, 29%, 47%, 33%)
Oklch
oklch(61.9% 0.076 51.8)

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

#7F8070

Ink Gray · Gray · Warm Gray

HEX
#7F8070
RGB
rgb(127, 128, 112)
HSL
hsl(64, 7%, 47%)
HSB
hsb(64, 13%, 50%)
CMYK
cmyk(1%, 0%, 13%, 50%)
Oklch
oklch(59.4% 0.024 110.0)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#659694

Mineral Blue · CadetBlue · Mint Ice

HEX
#659694
RGB
rgb(101, 150, 148)
HSL
hsl(178, 20%, 49%)
HSB
hsb(178, 33%, 59%)
CMYK
cmyk(33%, 0%, 1%, 41%)
Oklch
oklch(63.8% 0.053 192.7)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3D4A
3DFFF2

Analogous

FF3DAB
FF3D4A
FF913D

Triadic

FF3D4A
4AFF3D
3D4AFF

Split-Comp.

FF3D4A
3DFF91
3DABFF

Tetradic

FF3D4A
ABFF3D
3DFFF2
913DFF

Contrast Matrix WCAG 2.1 Contrast

FF3D4A
FF7863
AB795B
7F8070
659694
—
1.3
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.3
Fail
—
1.4
Fail
1.6
Fail
1.3
Fail
1.1
Fail
1.4
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.6
Fail
1.1
Fail
—
1.2
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.2
Fail
—
White BG
3.5AA Large
2.6Fail
3.7AA Large
4.0AA Large
3.3AA Large
Black BG
6.0AA
8.1AAA
5.6AA
5.2AA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABA947
C5C368
959562
7F7F74
7A7B94

Deuteranopia

B6C546
CCD769
989C64
7F7F75
777495

Tritanopia

F54444
F86C6D
A96869
7F7778
679595

Achromatopsia

787878
9E9E9E
858585
7E7E7E
878787

Shades & Tints Shades & Tints

#FF3D4A

Dark
Light

#FF7863

Dark
Light

#AB795B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3d4a;
  --color-2: #ff7863;
  --color-3: #ab795b;
  --color-4: #7f8070;
  --color-5: #659694;
}

SCSS

$color-1: #ff3d4a;
$color-2: #ff7863;
$color-3: #ab795b;
$color-4: #7f8070;
$color-5: #659694;

TAILWIND

colors: {
  'brand-1': '#ff3d4a',
  'brand-2': '#ff7863',
  'brand-3': '#ab795b',
  'brand-4': '#7f8070',
  'brand-5': '#659694',
}

RGB Array

[255, 61, 74], [255, 120, 99], [171, 121, 91], [127, 128, 112], [101, 150, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF3D4A, #FF7863, #AB795B, #7F8070, #659694 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: #ff3d4a; --color-2: #ff7863; --color-3: #ab795b; --color-4: #7f8070; --color-5: #659694. 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