← Back to Editor

#210F10 · #3D1529 · #735C16 · #788761 · #46B78C

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

#210F10

Crimson · Black · Deep Berry

HEX
#210F10
RGB
rgb(33, 15, 16)
HSL
hsl(357, 38%, 9%)
HSB
hsb(357, 55%, 13%)
CMYK
cmyk(0%, 55%, 52%, 87%)
Oklch
oklch(19.5% 0.031 16.7)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

#3D1529

Dark Violet · DarkSlateGray · Raspberry

HEX
#3D1529
RGB
rgb(61, 21, 41)
HSL
hsl(330, 49%, 16%)
HSB
hsb(330, 66%, 24%)
CMYK
cmyk(0%, 66%, 33%, 76%)
Oklch
oklch(26.5% 0.068 351.6)

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

#735C16

Ochre · DarkOliveGreen · Honey Gold

HEX
#735C16
RGB
rgb(115, 92, 22)
HSL
hsl(45, 68%, 27%)
HSB
hsb(45, 81%, 45%)
CMYK
cmyk(0%, 20%, 81%, 55%)
Oklch
oklch(48.5% 0.090 89.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#788761

Grass Green · Gray · Olive Green

HEX
#788761
RGB
rgb(120, 135, 97)
HSL
hsl(84, 16%, 45%)
HSB
hsb(84, 28%, 53%)
CMYK
cmyk(11%, 0%, 28%, 47%)
Oklch
oklch(60.1% 0.058 125.6)

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

#46B78C

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#46B78C
RGB
rgb(70, 183, 140)
HSL
hsl(157, 45%, 50%)
HSB
hsb(157, 62%, 72%)
CMYK
cmyk(62%, 0%, 23%, 28%)
Oklch
oklch(70.3% 0.121 164.7)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

210F10
0E201F

Analogous

200E18
210F10
20160E

Triadic

210F10
0F200E
0E0F20

Split-Comp.

210F10
0E2016
0E1820

Tetradic

210F10
18200E
0E201F
160E20

Contrast Matrix WCAG 2.1 Contrast

210F10
3D1529
735C16
788761
46B78C
—
1.2
Fail
2.9
Fail
4.8
AA
7.4
AAA
1.2
Fail
—
2.4
Fail
4.1
AA Large
6.3
AA
2.9
Fail
2.4
Fail
—
1.7
Fail
2.6
Fail
4.8
AA
4.1
AA Large
1.7
Fail
—
1.5
Fail
7.4
AAA
6.3
AA
2.6
Fail
1.5
Fail
—
White BG
18.4AAA
15.7AAA
6.4AA
3.9AA Large
2.5Fail
Black BG
1.1Fail
1.3Fail
3.3AA Large
5.4AA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

191910
2C2B24
696927
7E7F6A
777896

Deuteranopia

1A1C10
2E3123
6A6C2B
7E7D6C
706899

Tritanopia

201010
3B2020
723437
797173
4C9FA0

Achromatopsia

141414
232323
5B5B5B
7E7E7E
909090

Shades & Tints Shades & Tints

#210F10

Dark
Light

#3D1529

Dark
Light

#735C16

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #210f10;
  --color-2: #3d1529;
  --color-3: #735c16;
  --color-4: #788761;
  --color-5: #46b78c;
}

SCSS

$color-1: #210f10;
$color-2: #3d1529;
$color-3: #735c16;
$color-4: #788761;
$color-5: #46b78c;

TAILWIND

colors: {
  'brand-1': '#210f10',
  'brand-2': '#3d1529',
  'brand-3': '#735c16',
  'brand-4': '#788761',
  'brand-5': '#46b78c',
}

RGB Array

[33, 15, 16], [61, 21, 41], [115, 92, 22], [120, 135, 97], [70, 183, 140]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #210F10, #3D1529, #735C16, #788761, #46B78C is ideal for: tech websites, dark mode UIs, game UIs, 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: #210f10; --color-2: #3d1529; --color-3: #735c16; --color-4: #788761; --color-5: #46b78c. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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