← Back to Editor

#18122E · #341A47 · #743466 · #9BCF7A · #1A9E86

bright

A 5-color bright 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

#18122E

Deep Indigo · Black · Deep Sea Blue

HEX
#18122E
RGB
rgb(24, 18, 46)
HSL
hsl(253, 44%, 13%)
HSB
hsb(253, 61%, 18%)
CMYK
cmyk(48%, 61%, 0%, 82%)
Oklch
oklch(20.7% 0.054 290.8)

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

#341A47

Dark Plum · MidnightBlue · Dark Purple

HEX
#341A47
RGB
rgb(52, 26, 71)
HSL
hsl(275, 46%, 19%)
HSB
hsb(275, 63%, 28%)
CMYK
cmyk(27%, 63%, 0%, 72%)
Oklch
oklch(27.8% 0.084 308.6)

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

#743466

Rose Purple · DimGray · Eggplant

HEX
#743466
RGB
rgb(116, 52, 102)
HSL
hsl(313, 38%, 33%)
HSB
hsb(313, 55%, 45%)
CMYK
cmyk(0%, 55%, 12%, 55%)
Oklch
oklch(42.9% 0.111 336.4)

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

#9BCF7A

Celadon · DarkSeaGreen · Apple Green

HEX
#9BCF7A
RGB
rgb(155, 207, 122)
HSL
hsl(97, 47%, 65%)
HSB
hsb(97, 41%, 81%)
CMYK
cmyk(25%, 0%, 41%, 19%)
Oklch
oklch(79.8% 0.126 134.1)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#1A9E86

Mineral Blue · Teal · Mint Ice

HEX
#1A9E86
RGB
rgb(26, 158, 134)
HSL
hsl(169, 72%, 36%)
HSB
hsb(169, 84%, 62%)
CMYK
cmyk(84%, 0%, 15%, 38%)
Oklch
oklch(62.7% 0.112 176.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

18122E
293013

Analogous

131B30
18122E
271330

Triadic

18122E
301913
133019

Split-Comp.

18122E
302713
1B3013

Tetradic

18122E
30131B
293013
133027

Contrast Matrix WCAG 2.1 Contrast

18122E
341A47
743466
9BCF7A
1A9E86
—
1.2
Fail
2.1
Fail
10.0
AAA
5.4
AA
1.2
Fail
—
1.8
Fail
8.4
AAA
4.5
AA
2.1
Fail
1.8
Fail
—
4.8
AA
2.6
Fail
10.0
AAA
8.4
AAA
4.8
AA
—
1.8
Fail
5.4
AA
4.5
AA
2.6
Fail
1.8
Fail
—
White BG
18.0AAA
15.2AAA
8.7AAA
1.8Fail
3.3AA Large
Black BG
1.2Fail
1.4Fail
2.4Fail
11.6AAA
6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

151527
29293C
58585A
B2B28F
53548C

Deuteranopia

161626
2A2C39
5C6157
AFAB94
4C428D

Tritanopia

182221
333432
71504E
9E9FA2
219091

Achromatopsia

171717
272727
4D4D4D
B6B6B6
747474

Shades & Tints Shades & Tints

#18122E

Dark
Light

#341A47

Dark
Light

#743466

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #18122e;
  --color-2: #341a47;
  --color-3: #743466;
  --color-4: #9bcf7a;
  --color-5: #1a9e86;
}

SCSS

$color-1: #18122e;
$color-2: #341a47;
$color-3: #743466;
$color-4: #9bcf7a;
$color-5: #1a9e86;

TAILWIND

colors: {
  'brand-1': '#18122e',
  'brand-2': '#341a47',
  'brand-3': '#743466',
  'brand-4': '#9bcf7a',
  'brand-5': '#1a9e86',
}

RGB Array

[24, 18, 46], [52, 26, 71], [116, 52, 102], [155, 207, 122], [26, 158, 134]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This bright-style palette of #18122E, #341A47, #743466, #9BCF7A, #1A9E86 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: #18122e; --color-2: #341a47; --color-3: #743466; --color-4: #9bcf7a; --color-5: #1a9e86. 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 bright-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