← Back to Editor

#3D7085 · #668E96 · #FFED8F · #EB784B · #495966

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 LibraryData Visualization

Color Details Color Details

#3D7085

Slate Blue · SteelBlue · Mint Ice

HEX
#3D7085
RGB
rgb(61, 112, 133)
HSL
hsl(198, 37%, 38%)
HSB
hsb(198, 54%, 52%)
CMYK
cmyk(54%, 16%, 0%, 48%)
Oklch
oklch(51.8% 0.064 226.8)

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

#668E96

Slate Blue · SlateGray · Mint Ice

HEX
#668E96
RGB
rgb(102, 142, 150)
HSL
hsl(190, 19%, 49%)
HSB
hsb(190, 32%, 59%)
CMYK
cmyk(32%, 5%, 0%, 41%)
Oklch
oklch(62.0% 0.046 211.3)

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

#FFED8F

Fresh Green · Khaki · Lemon Cream

HEX
#FFED8F
RGB
rgb(255, 237, 143)
HSL
hsl(50, 100%, 78%)
HSB
hsb(50, 44%, 100%)
CMYK
cmyk(0%, 7%, 44%, 0%)
Oklch
oklch(94.1% 0.116 98.7)

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

#EB784B

Apricot · Coral · Warm Sun

HEX
#EB784B
RGB
rgb(235, 120, 75)
HSL
hsl(17, 80%, 61%)
HSB
hsb(17, 68%, 92%)
CMYK
cmyk(0%, 49%, 68%, 8%)
Oklch
oklch(69.7% 0.154 41.3)

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

#495966

Slate Blue · DimGray · Prussian Blue

HEX
#495966
RGB
rgb(73, 89, 102)
HSL
hsl(207, 17%, 34%)
HSB
hsb(207, 28%, 40%)
CMYK
cmyk(28%, 13%, 0%, 60%)
Oklch
oklch(45.5% 0.029 242.9)

Traditional「Slate Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D7085
85533D

Analogous

3D8576
3D7085
3D4B85

Triadic

3D7085
853D6F
6F853D

Split-Comp.

3D7085
853D4B
85763D

Tetradic

3D7085
763D85
85533D
4B853D

Contrast Matrix WCAG 2.1 Contrast

3D7085
668E96
FFED8F
EB784B
495966
—
1.5
Fail
4.6
AA
1.9
Fail
1.3
Fail
1.5
Fail
—
3.0
AA Large
1.2
Fail
2.0
Fail
4.6
AA
3.0
AA Large
—
2.4
Fail
6.1
AA
1.9
Fail
1.2
Fail
2.4
Fail
—
2.5
Fail
1.3
Fail
2.0
Fail
6.1
AA
2.5
Fail
—
White BG
5.4AA
3.6AA Large
1.2Fail
2.9Fail
7.2AAA
Black BG
3.9AA Large
5.9AA
17.8AAA
7.3AAA
2.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

535480
777894
F7F7A6
B9B856
505063

Deuteranopia

504C7F
757294
F8FAAB
C0C959
4F4E62

Tritanopia

407C7B
689392
FEB8BC
E55E60
4A6060

Achromatopsia

636363
838383
E8E8E8
959595
565656

Shades & Tints Shades & Tints

#3D7085

Dark
Light

#668E96

Dark
Light

#FFED8F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d7085;
  --color-2: #668e96;
  --color-3: #ffed8f;
  --color-4: #eb784b;
  --color-5: #495966;
}

SCSS

$color-1: #3d7085;
$color-2: #668e96;
$color-3: #ffed8f;
$color-4: #eb784b;
$color-5: #495966;

TAILWIND

colors: {
  'brand-1': '#3d7085',
  'brand-2': '#668e96',
  'brand-3': '#ffed8f',
  'brand-4': '#eb784b',
  'brand-5': '#495966',
}

RGB Array

[61, 112, 133], [102, 142, 150], [255, 237, 143], [235, 120, 75], [73, 89, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D7085, #668E96, #FFED8F, #EB784B, #495966 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #3d7085; --color-2: #668e96; --color-3: #ffed8f; --color-4: #eb784b; --color-5: #495966. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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