← Back to Editor

#777085 · #F26E70 · #9CAEA4 · #D8CE5F · #F78387

space

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

#777085

Deep Indigo · Gray · Warm Gray

HEX
#777085
RGB
rgb(119, 112, 133)
HSL
hsl(260, 9%, 48%)
HSB
hsb(260, 16%, 52%)
CMYK
cmyk(11%, 16%, 0%, 48%)
Oklch
oklch(55.9% 0.033 300.5)

Traditional「Deep Indigo」· Paint「Warm Gray」· Creative Urban Concrete

#F26E70

Peach Pink · Salmon · Coral Red

HEX
#F26E70
RGB
rgb(242, 110, 112)
HSL
hsl(359, 84%, 69%)
HSB
hsb(359, 55%, 95%)
CMYK
cmyk(0%, 55%, 54%, 5%)
Oklch
oklch(69.8% 0.163 21.3)

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

#9CAEA4

Celadon · DarkGray · Apple Green

HEX
#9CAEA4
RGB
rgb(156, 174, 164)
HSL
hsl(147, 10%, 65%)
HSB
hsb(147, 10%, 68%)
CMYK
cmyk(10%, 0%, 6%, 32%)
Oklch
oklch(73.4% 0.025 161.5)

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

#D8CE5F

Fresh Green · BurlyWood · Sunflower

HEX
#D8CE5F
RGB
rgb(216, 206, 95)
HSL
hsl(55, 61%, 61%)
HSB
hsb(55, 56%, 85%)
CMYK
cmyk(0%, 5%, 56%, 15%)
Oklch
oklch(83.8% 0.133 104.1)

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

#F78387

Peach Pink · LightCoral · Coral Red

HEX
#F78387
RGB
rgb(247, 131, 135)
HSL
hsl(358, 88%, 74%)
HSB
hsb(358, 47%, 97%)
CMYK
cmyk(0%, 47%, 45%, 3%)
Oklch
oklch(74.0% 0.142 19.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

777085
7E856F

Analogous

6F7385
777085
826F85

Triadic

777085
85776F
6F8577

Split-Comp.

777085
85826F
73856F

Tetradic

777085
856F73
7E856F
6F8582

Contrast Matrix WCAG 2.1 Contrast

777085
F26E70
9CAEA4
D8CE5F
F78387
—
1.6
Fail
2.0
Fail
2.9
Fail
1.9
Fail
1.6
Fail
—
1.2
Fail
1.8
Fail
1.2
Fail
2.0
Fail
1.2
Fail
—
1.4
Fail
1.1
Fail
2.9
Fail
1.8
Fail
1.4
Fail
—
1.5
Fail
1.9
Fail
1.2
Fail
1.1
Fail
1.5
Fail
—
White BG
4.7AA
2.9Fail
2.3Fail
1.6Fail
2.5Fail
Black BG
4.4AA Large
7.2AAA
9.0AAA
12.9AAA
8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

747480
B9B870
A4A4A6
D4D47A
C5C486

Deuteranopia

74757F
C1CA6F
A3A1A7
D4D580
CCD486

Tritanopia

777C7B
EB6F6F
9DA8A9
D88F94
F18585

Achromatopsia

747474
969696
A7A7A7
C4C4C4
A6A6A6

Shades & Tints Shades & Tints

#777085

Dark
Light

#F26E70

Dark
Light

#9CAEA4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #777085;
  --color-2: #f26e70;
  --color-3: #9caea4;
  --color-4: #d8ce5f;
  --color-5: #f78387;
}

SCSS

$color-1: #777085;
$color-2: #f26e70;
$color-3: #9caea4;
$color-4: #d8ce5f;
$color-5: #f78387;

TAILWIND

colors: {
  'brand-1': '#777085',
  'brand-2': '#f26e70',
  'brand-3': '#9caea4',
  'brand-4': '#d8ce5f',
  'brand-5': '#f78387',
}

RGB Array

[119, 112, 133], [242, 110, 112], [156, 174, 164], [216, 206, 95], [247, 131, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #777085, #F26E70, #9CAEA4, #D8CE5F, #F78387 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: #777085; --color-2: #f26e70; --color-3: #9caea4; --color-4: #d8ce5f; --color-5: #f78387. 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