← Back to Editor

#3D7083 · #3A9994 · #AB1055 · #DD861D · #DDCEBC

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

#3D7083

Slate Blue · DimGray · Mint Ice

HEX
#3D7083
RGB
rgb(61, 112, 131)
HSL
hsl(196, 36%, 38%)
HSB
hsb(196, 53%, 51%)
CMYK
cmyk(53%, 15%, 0%, 49%)
Oklch
oklch(51.7% 0.062 224.3)

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

#3A9994

Mineral Blue · CadetBlue · Mint Ice

HEX
#3A9994
RGB
rgb(58, 153, 148)
HSL
hsl(177, 45%, 41%)
HSB
hsb(177, 62%, 60%)
CMYK
cmyk(62%, 0%, 3%, 40%)
Oklch
oklch(62.6% 0.088 190.3)

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

#AB1055

Dark Violet · Brown · Camellia

HEX
#AB1055
RGB
rgb(171, 16, 85)
HSL
hsl(333, 83%, 37%)
HSB
hsb(333, 91%, 67%)
CMYK
cmyk(0%, 91%, 50%, 33%)
Oklch
oklch(48.4% 0.187 2.7)

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

#DD861D

Ochre · Chocolate · Amber Brown

HEX
#DD861D
RGB
rgb(221, 134, 29)
HSL
hsl(33, 77%, 49%)
HSB
hsb(33, 87%, 87%)
CMYK
cmyk(0%, 39%, 87%, 13%)
Oklch
oklch(69.7% 0.150 63.6)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#DDCEBC

Goose Yellow · LightGray · Peach Orange

HEX
#DDCEBC
RGB
rgb(221, 206, 188)
HSL
hsl(33, 33%, 80%)
HSB
hsb(33, 15%, 87%)
CMYK
cmyk(0%, 7%, 15%, 13%)
Oklch
oklch(85.9% 0.030 72.4)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D7083
84513E

Analogous

3E8474
3D7083
3E4E84

Triadic

3D7083
843E71
71843E

Split-Comp.

3D7083
843E4E
84743E

Tetradic

3D7083
743E84
84513E
4E843E

Contrast Matrix WCAG 2.1 Contrast

3D7083
3A9994
AB1055
DD861D
DDCEBC
—
1.6
Fail
1.3
Fail
2.0
Fail
3.5
AA Large
1.6
Fail
—
2.1
Fail
1.2
Fail
2.2
Fail
1.3
Fail
2.1
Fail
—
2.6
Fail
4.6
AA
2.0
Fail
1.2
Fail
2.6
Fail
—
1.8
Fail
3.5
AA Large
2.2
Fail
4.6
AA
1.8
Fail
—
White BG
5.5AA
3.4AA Large
7.2AAA
2.8Fail
1.5Fail
Black BG
3.8AA Large
6.2AA
2.9Fail
7.5AAA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

53547E
636495
686644
B7B736
D7D6C0

Deuteranopia

504C7D
5E5796
717C40
BCC33C
D7D9C1

Tritanopia

407B7A
3F9696
A33734
D94A4F
DCC4C5

Achromatopsia

636363
7C7C7C
464646
949494
D0D0D0

Shades & Tints Shades & Tints

#3D7083

Dark
Light

#3A9994

Dark
Light

#AB1055

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d7083;
  --color-2: #3a9994;
  --color-3: #ab1055;
  --color-4: #dd861d;
  --color-5: #ddcebc;
}

SCSS

$color-1: #3d7083;
$color-2: #3a9994;
$color-3: #ab1055;
$color-4: #dd861d;
$color-5: #ddcebc;

TAILWIND

colors: {
  'brand-1': '#3d7083',
  'brand-2': '#3a9994',
  'brand-3': '#ab1055',
  'brand-4': '#dd861d',
  'brand-5': '#ddcebc',
}

RGB Array

[61, 112, 131], [58, 153, 148], [171, 16, 85], [221, 134, 29], [221, 206, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D7083, #3A9994, #AB1055, #DD861D, #DDCEBC 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: #3d7083; --color-2: #3a9994; --color-3: #ab1055; --color-4: #dd861d; --color-5: #ddcebc. 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