#10152B + #3F6096 + #7B306B + #4A6E86 + #856991 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#10152B

Indigo · Black · Deep Sea Blue

HEX

#10152B

RGB

rgb(16, 21, 43)

HSL

hsl(229, 46%, 12%)

HSB

hsb(229, 63%, 17%)

CMYK

cmyk(63%, 51%, 0%, 83%)

Oklch

oklch(20.4% 0.044 272.3)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#3F6096

Indigo · DarkSlateBlue · Navy Blue

HEX

#3F6096

RGB

rgb(63, 96, 150)

HSL

hsl(217, 41%, 42%)

HSB

hsb(217, 58%, 59%)

CMYK

cmyk(58%, 36%, 0%, 41%)

Oklch

oklch(48.9% 0.095 259.8)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#7B306B

Rose Purple · Purple · Eggplant

HEX

#7B306B

RGB

rgb(123, 48, 107)

HSL

hsl(313, 44%, 34%)

HSB

hsb(313, 61%, 48%)

CMYK

cmyk(0%, 61%, 13%, 52%)

Oklch

oklch(43.6% 0.128 336.7)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

#4A6E86

Slate Blue · DimGray · Navy Blue

HEX

#4A6E86

RGB

rgb(74, 110, 134)

HSL

hsl(204, 29%, 41%)

HSB

hsb(204, 45%, 53%)

CMYK

cmyk(45%, 18%, 0%, 47%)

Oklch

oklch(52.1% 0.056 238.4)

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

#856991

Dark Plum · Gray · Violet

HEX

#856991

RGB

rgb(133, 105, 145)

HSL

hsl(282, 16%, 49%)

HSB

hsb(282, 28%, 57%)

CMYK

cmyk(8%, 28%, 0%, 43%)

Oklch

oklch(56.3% 0.069 315.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

10152B

2D2811

Analogous

11242D

10152B

19112D

Triadic

10152B

2D1116

162D11

Split-Comp.

10152B

2D1911

242D11

Tetradic

10152B

2D1124

2D2811

112D19

Contrast Matrix WCAG 2.1 Contrast

10152B	3F6096	7B306B	4A6E86	856991
—	2.9 Fail	2.1 Fail	3.3 AA Large	3.8 AA Large
2.9 Fail	—	1.3 Fail	1.2 Fail	1.3 Fail
2.1 Fail	1.3 Fail	—	1.6 Fail	1.8 Fail
3.3 AA Large	1.2 Fail	1.6 Fail	—	1.1 Fail
3.8 AA Large	1.3 Fail	1.8 Fail	1.1 Fail	—

White BG

18.0AAA

6.3AA

8.5AAA

5.4AA

4.7AA

Black BG

1.2Fail

3.3AA Large

2.5Fail

3.9AA Large

4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

121226

4D4E89

5B5A5D

5A5A80

797987

Deuteranopia

121224

4B4986

5F6559

58557F

7B7D85

Tritanopia

102121

417F7C

77514F

4C7C7B

84807E

Achromatopsia

161616

5C5C5C

4D4D4D

666666

767676

Shades & Tints Shades & Tints

#10152B

Dark

Light

#3F6096

Dark

Light

#7B306B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #10152b;
  --color-2: #3f6096;
  --color-3: #7b306b;
  --color-4: #4a6e86;
  --color-5: #856991;
}

SCSS

$color-1: #10152b;
$color-2: #3f6096;
$color-3: #7b306b;
$color-4: #4a6e86;
$color-5: #856991;

TAILWIND

colors: {
  'brand-1': '#10152b',
  'brand-2': '#3f6096',
  'brand-3': '#7b306b',
  'brand-4': '#4a6e86',
  'brand-5': '#856991',
}

RGB Array

[16, 21, 43], [63, 96, 150], [123, 48, 107], [74, 110, 134], [133, 105, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #10152B, #3F6096, #7B306B, #4A6E86, #856991 is ideal for: tech websites, dark mode UIs, game UIs. 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: #10152b; --color-2: #3f6096; --color-3: #7b306b; --color-4: #4a6e86; --color-5: #856991. 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. 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 nature-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