#1BA4C6 + #088EB4 + #745F5E + #0670AA + #573A3F - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#1BA4C6

Lake Blue · LightSeaGreen · Mint Ice

HEX

#1BA4C6

RGB

rgb(27, 164, 198)

HSL

hsl(192, 76%, 44%)

HSB

hsb(192, 86%, 78%)

CMYK

cmyk(86%, 17%, 0%, 22%)

Oklch

oklch(66.7% 0.117 220.5)

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

#088EB4

Lake Blue · LightSeaGreen · Mint Ice

HEX

#088EB4

RGB

rgb(8, 142, 180)

HSL

hsl(193, 91%, 37%)

HSB

hsb(193, 96%, 71%)

CMYK

cmyk(96%, 21%, 0%, 29%)

Oklch

oklch(60.2% 0.113 225.6)

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

#745F5E

Crimson · DimGray · Passion Red

HEX

#745F5E

RGB

rgb(116, 95, 94)

HSL

hsl(3, 10%, 41%)

HSB

hsb(3, 19%, 45%)

CMYK

cmyk(0%, 18%, 19%, 55%)

Oklch

oklch(50.6% 0.027 21.3)

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

#0670AA

Lake Blue · Teal · Prussian Blue

HEX

#0670AA

RGB

rgb(6, 112, 170)

HSL

hsl(201, 93%, 35%)

HSB

hsb(201, 96%, 67%)

CMYK

cmyk(96%, 34%, 0%, 33%)

Oklch

oklch(52.3% 0.123 242.4)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

#573A3F

Crimson · DarkSlateGray · Wine Red

HEX

#573A3F

RGB

rgb(87, 58, 63)

HSL

hsl(350, 20%, 28%)

HSB

hsb(350, 33%, 34%)

CMYK

cmyk(0%, 33%, 28%, 66%)

Oklch

oklch(38.3% 0.042 7.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1BA4C6

C53D1B

Analogous

1BC592

1BA4C6

1B4EC5

Triadic

1BA4C6

C51BA3

A3C51B

Split-Comp.

1BA4C6

C51B4E

C5921B

Tetradic

1BA4C6

921BC5

C53D1B

4EC51B

Contrast Matrix WCAG 2.1 Contrast

1BA4C6	088EB4	745F5E	0670AA	573A3F
—	1.3 Fail	2.0 Fail	1.8 Fail	3.4 AA Large
1.3 Fail	—	1.6 Fail	1.4 Fail	2.7 Fail
2.0 Fail	1.6 Fail	—	1.1 Fail	1.7 Fail
1.8 Fail	1.4 Fail	1.1 Fail	—	1.9 Fail
3.4 AA Large	2.7 Fail	1.7 Fail	1.9 Fail	—

White BG

2.9Fail

3.8AA Large

5.9AA

5.4AA

10.1AAA

Black BG

7.2AAA

5.5AA

3.5AA Large

3.9AA Large

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5658BE

4243AB

6B6B5E

34359C

4A4A3E

Deuteranopia

4E44BC

3A30A9

6C6E5E

2E2699

4C4E3D

Tritanopia

22B7B6

0FA4A2

735E5E

0B918E

563D3D

Achromatopsia

7F7F7F

6A6A6A

656565

575757

434343

Shades & Tints Shades & Tints

#1BA4C6

Dark

Light

#088EB4

Dark

Light

#745F5E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1ba4c6;
  --color-2: #088eb4;
  --color-3: #745f5e;
  --color-4: #0670aa;
  --color-5: #573a3f;
}

SCSS

$color-1: #1ba4c6;
$color-2: #088eb4;
$color-3: #745f5e;
$color-4: #0670aa;
$color-5: #573a3f;

TAILWIND

colors: {
  'brand-1': '#1ba4c6',
  'brand-2': '#088eb4',
  'brand-3': '#745f5e',
  'brand-4': '#0670aa',
  'brand-5': '#573a3f',
}

RGB Array

[27, 164, 198], [8, 142, 180], [116, 95, 94], [6, 112, 170], [87, 58, 63]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1BA4C6, #088EB4, #745F5E, #0670AA, #573A3F 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: #1ba4c6; --color-2: #088eb4; --color-3: #745f5e; --color-4: #0670aa; --color-5: #573a3f. 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 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