← Back to Editor

#1A7288 · #86DEEA · #6A4D51 · #A08C8D · #B0ACAD

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 Library

Color Details Color Details

#1A7288

Lake Blue · Teal · Mint Ice

HEX
#1A7288
RGB
rgb(26, 114, 136)
HSL
hsl(192, 68%, 32%)
HSB
hsb(192, 81%, 53%)
CMYK
cmyk(81%, 16%, 0%, 47%)
Oklch
oklch(51.3% 0.085 219.2)

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

#86DEEA

Sky Blue · SkyBlue · Lake Green

HEX
#86DEEA
RGB
rgb(134, 222, 234)
HSL
hsl(187, 70%, 72%)
HSB
hsb(187, 43%, 92%)
CMYK
cmyk(43%, 5%, 0%, 8%)
Oklch
oklch(84.9% 0.086 206.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#6A4D51

Crimson · DimGray · Wine Red

HEX
#6A4D51
RGB
rgb(106, 77, 81)
HSL
hsl(352, 16%, 36%)
HSB
hsb(352, 27%, 42%)
CMYK
cmyk(0%, 27%, 24%, 58%)
Oklch
oklch(45.3% 0.040 9.6)

Traditional「Crimson」· Paint「Wine Red」· Creative Blush Sunrise

#A08C8D

Crimson · Gray · Passion Red

HEX
#A08C8D
RGB
rgb(160, 140, 141)
HSL
hsl(357, 10%, 59%)
HSB
hsb(357, 12%, 63%)
CMYK
cmyk(0%, 12%, 12%, 37%)
Oklch
oklch(65.8% 0.024 14.3)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#B0ACAD

Ash · DarkGray · Silver Sand

HEX
#B0ACAD
RGB
rgb(176, 172, 173)
HSL
hsl(345, 2%, 68%)
HSB
hsb(345, 2%, 69%)
CMYK
cmyk(0%, 2%, 2%, 31%)
Oklch
oklch(74.8% 0.005 0.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1A7288
89301A

Analogous

1A8968
1A7288
1A3B89

Triadic

1A7288
891A73
73891A

Split-Comp.

1A7288
891A3B
89681A

Tetradic

1A7288
681A89
89301A
3B891A

Contrast Matrix WCAG 2.1 Contrast

1A7288
86DEEA
6A4D51
A08C8D
B0ACAD
—
3.6
AA Large
1.4
Fail
1.7
Fail
2.5
Fail
3.6
AA Large
—
4.9
AA
2.1
Fail
1.5
Fail
1.4
Fail
4.9
AA
—
2.4
Fail
3.3
AA Large
1.7
Fail
2.1
Fail
2.4
Fail
—
1.4
Fail
2.5
Fail
1.5
Fail
3.3
AA Large
1.4
Fail
—
White BG
5.5AA
1.5Fail
7.5AAA
3.2AA Large
2.2Fail
Black BG
3.8AA Large
13.7AAA
2.8Fail
6.6AA
9.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

404183
ACADE7
5D5D50
97978D
AEAEAD

Deuteranopia

3B3481
A7A0E6
5F6150
999A8D
AFAFAD

Tritanopia

1E7E7E
8AE5E4
694F4F
9F8D8D
B0ADAD

Achromatopsia

5A5A5A
C5C5C5
565656
929292
ADADAD

Shades & Tints Shades & Tints

#1A7288

Dark
Light

#86DEEA

Dark
Light

#6A4D51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1a7288;
  --color-2: #86deea;
  --color-3: #6a4d51;
  --color-4: #a08c8d;
  --color-5: #b0acad;
}

SCSS

$color-1: #1a7288;
$color-2: #86deea;
$color-3: #6a4d51;
$color-4: #a08c8d;
$color-5: #b0acad;

TAILWIND

colors: {
  'brand-1': '#1a7288',
  'brand-2': '#86deea',
  'brand-3': '#6a4d51',
  'brand-4': '#a08c8d',
  'brand-5': '#b0acad',
}

RGB Array

[26, 114, 136], [134, 222, 234], [106, 77, 81], [160, 140, 141], [176, 172, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1A7288, #86DEEA, #6A4D51, #A08C8D, #B0ACAD is ideal for: corporate websites, product showcases, portfolios. 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: #1a7288; --color-2: #86deea; --color-3: #6a4d51; --color-4: #a08c8d; --color-5: #b0acad. 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. 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