← Back to Editor

#3D433A · #5F7A83 · #899C65 · #C58075 · #F2E0C3

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

#3D433A

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#3D433A
RGB
rgb(61, 67, 58)
HSL
hsl(100, 7%, 25%)
HSB
hsb(100, 13%, 26%)
CMYK
cmyk(9%, 0%, 13%, 74%)
Oklch
oklch(37.4% 0.017 135.1)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#5F7A83

Slate Blue · SlateGray · Mint Ice

HEX
#5F7A83
RGB
rgb(95, 122, 131)
HSL
hsl(195, 16%, 44%)
HSB
hsb(195, 27%, 51%)
CMYK
cmyk(27%, 7%, 0%, 49%)
Oklch
oklch(56.2% 0.034 220.2)

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

#899C65

Grass Green · Gray · Olive Green

HEX
#899C65
RGB
rgb(137, 156, 101)
HSL
hsl(81, 22%, 50%)
HSB
hsb(81, 35%, 61%)
CMYK
cmyk(12%, 0%, 35%, 39%)
Oklch
oklch(66.4% 0.080 124.0)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#C58075

Peach Pink · DarkSalmon · Coral Red

HEX
#C58075
RGB
rgb(197, 128, 117)
HSL
hsl(8, 41%, 62%)
HSB
hsb(8, 41%, 77%)
CMYK
cmyk(0%, 35%, 41%, 23%)
Oklch
oklch(66.8% 0.088 29.5)

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

#F2E0C3

Goose Yellow · Bisque · Peach Orange

HEX
#F2E0C3
RGB
rgb(242, 224, 195)
HSL
hsl(37, 64%, 86%)
HSB
hsb(37, 19%, 95%)
CMYK
cmyk(0%, 7%, 19%, 5%)
Oklch
oklch(91.4% 0.043 79.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3D433A
413B44

Analogous

43443B
3D433A
3B443D

Triadic

3D433A
3B3E44
443B3E

Split-Comp.

3D433A
3D3B44
443B43

Tetradic

3D433A
3B4344
413B44
443D3B

Contrast Matrix WCAG 2.1 Contrast

3D433A
5F7A83
899C65
C58075
F2E0C3
—
2.2
Fail
3.4
AA Large
3.3
AA Large
7.9
AAA
2.2
Fail
—
1.5
Fail
1.5
Fail
3.5
AA Large
3.4
AA Large
1.5
Fail
—
1.0
Fail
2.3
Fail
3.3
AA Large
1.5
Fail
1.0
Fail
—
2.4
Fail
7.9
AAA
3.5
AA Large
2.3
Fail
2.4
Fail
—
White BG
10.2AAA
4.6AA
3.0Fail
3.1AA Large
1.3Fail
Black BG
2.1Fail
4.6AA
7.0AAA
6.7AA
16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

40403C
6B6B81
919172
A7A778
EAEACA

Deuteranopia

3F3F3D
696780
908F75
ABB078
EBEDCC

Tritanopia

3D3E3E
607F7F
8A7D7F
C27A7A
F1D0D1

Achromatopsia

404040
737373
909090
939393
E2E2E2

Shades & Tints Shades & Tints

#3D433A

Dark
Light

#5F7A83

Dark
Light

#899C65

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3d433a;
  --color-2: #5f7a83;
  --color-3: #899c65;
  --color-4: #c58075;
  --color-5: #f2e0c3;
}

SCSS

$color-1: #3d433a;
$color-2: #5f7a83;
$color-3: #899c65;
$color-4: #c58075;
$color-5: #f2e0c3;

TAILWIND

colors: {
  'brand-1': '#3d433a',
  'brand-2': '#5f7a83',
  'brand-3': '#899c65',
  'brand-4': '#c58075',
  'brand-5': '#f2e0c3',
}

RGB Array

[61, 67, 58], [95, 122, 131], [137, 156, 101], [197, 128, 117], [242, 224, 195]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3D433A, #5F7A83, #899C65, #C58075, #F2E0C3 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: #3d433a; --color-2: #5f7a83; --color-3: #899c65; --color-4: #c58075; --color-5: #f2e0c3. 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