← Back to Editor

#7A5F68 · #9D7FA1 · #CF6C4D · #FB9D53 · #F4E7B2

space

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

#7A5F68

Dark Violet · DimGray · Camellia

HEX
#7A5F68
RGB
rgb(122, 95, 104)
HSL
hsl(340, 12%, 43%)
HSB
hsb(340, 22%, 48%)
CMYK
cmyk(0%, 22%, 15%, 52%)
Oklch
oklch(51.6% 0.037 356.6)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#9D7FA1

Dark Plum · LightSlateGray · Violet

HEX
#9D7FA1
RGB
rgb(157, 127, 161)
HSL
hsl(293, 15%, 56%)
HSB
hsb(293, 21%, 63%)
CMYK
cmyk(2%, 21%, 0%, 37%)
Oklch
oklch(63.6% 0.061 322.4)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

#CF6C4D

Crimson · Chocolate · Passion Red

HEX
#CF6C4D
RGB
rgb(207, 108, 77)
HSL
hsl(14, 58%, 56%)
HSB
hsb(14, 63%, 81%)
CMYK
cmyk(0%, 48%, 63%, 19%)
Oklch
oklch(64.0% 0.133 38.1)

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

#FB9D53

Apricot · SandyBrown · Warm Sun

HEX
#FB9D53
RGB
rgb(251, 157, 83)
HSL
hsl(26, 95%, 65%)
HSB
hsb(26, 67%, 98%)
CMYK
cmyk(0%, 37%, 67%, 2%)
Oklch
oklch(77.8% 0.143 56.7)

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

#F4E7B2

Goose Yellow · Wheat · Lemon Cream

HEX
#F4E7B2
RGB
rgb(244, 231, 178)
HSL
hsl(48, 75%, 83%)
HSB
hsb(48, 27%, 96%)
CMYK
cmyk(0%, 5%, 27%, 4%)
Oklch
oklch(92.6% 0.070 95.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7A5F68
607B72

Analogous

7B6076
7A5F68
7B6560

Triadic

7A5F68
697B60
60697B

Split-Comp.

7A5F68
607B65
60767B

Tetradic

7A5F68
767B60
607B72
65607B

Contrast Matrix WCAG 2.1 Contrast

7A5F68
9D7FA1
CF6C4D
FB9D53
F4E7B2
—
1.6
Fail
1.6
Fail
2.7
Fail
4.6
AA
1.6
Fail
—
1.0
Fail
1.7
Fail
2.8
Fail
1.6
Fail
1.0
Fail
—
1.7
Fail
2.9
Fail
2.7
Fail
1.7
Fail
1.7
Fail
—
1.7
Fail
4.6
AA
2.8
Fail
2.9
Fail
1.7
Fail
—
White BG
5.7AA
3.5AA Large
3.6AA Large
2.1Fail
1.2Fail
Black BG
3.7AA Large
6.0AA
5.9AA
10.0AAA
16.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6E66
909099
A4A355
D2D165
EEEEBF

Deuteranopia

707265
929497
AAB156
D8DF69
EFF0C2

Tritanopia

796464
9C9291
CA5A5C
F67376
F3C9CB

Achromatopsia

686868
8C8C8C
868686
B1B1B1
E5E5E5

Shades & Tints Shades & Tints

#7A5F68

Dark
Light

#9D7FA1

Dark
Light

#CF6C4D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7a5f68;
  --color-2: #9d7fa1;
  --color-3: #cf6c4d;
  --color-4: #fb9d53;
  --color-5: #f4e7b2;
}

SCSS

$color-1: #7a5f68;
$color-2: #9d7fa1;
$color-3: #cf6c4d;
$color-4: #fb9d53;
$color-5: #f4e7b2;

TAILWIND

colors: {
  'brand-1': '#7a5f68',
  'brand-2': '#9d7fa1',
  'brand-3': '#cf6c4d',
  'brand-4': '#fb9d53',
  'brand-5': '#f4e7b2',
}

RGB Array

[122, 95, 104], [157, 127, 161], [207, 108, 77], [251, 157, 83], [244, 231, 178]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #7A5F68, #9D7FA1, #CF6C4D, #FB9D53, #F4E7B2 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: #7a5f68; --color-2: #9d7fa1; --color-3: #cf6c4d; --color-4: #fb9d53; --color-5: #f4e7b2. 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 space-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