← Back to Editor

#097790 · #37B7CC · #F8F6E9 · #B0AEA1 · #686559

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

#097790

Lake Blue · Teal · Mint Ice

HEX
#097790
RGB
rgb(9, 119, 144)
HSL
hsl(191, 88%, 30%)
HSB
hsb(191, 94%, 56%)
CMYK
cmyk(94%, 17%, 0%, 44%)
Oklch
oklch(52.7% 0.094 219.7)

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

#37B7CC

Lake Blue · MediumTurquoise · Lake Green

HEX
#37B7CC
RGB
rgb(55, 183, 204)
HSL
hsl(188, 59%, 51%)
HSB
hsb(188, 73%, 80%)
CMYK
cmyk(73%, 10%, 0%, 20%)
Oklch
oklch(72.0% 0.111 211.0)

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

#F8F6E9

Fresh Green · Linen · Lemon Cream

HEX
#F8F6E9
RGB
rgb(248, 246, 233)
HSL
hsl(52, 52%, 94%)
HSB
hsb(52, 6%, 97%)
CMYK
cmyk(0%, 1%, 6%, 3%)
Oklch
oklch(97.1% 0.017 99.6)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#B0AEA1

Fresh Green · DarkGray · Silver Sand

HEX
#B0AEA1
RGB
rgb(176, 174, 161)
HSL
hsl(52, 9%, 66%)
HSB
hsb(52, 9%, 69%)
CMYK
cmyk(0%, 1%, 9%, 31%)
Oklch
oklch(74.9% 0.018 99.7)

Traditional「Fresh Green」· Paint「Silver Sand」· Creative Urban Concrete

#686559

Ochre · DimGray · Charcoal

HEX
#686559
RGB
rgb(104, 101, 89)
HSL
hsl(48, 8%, 38%)
HSB
hsb(48, 14%, 41%)
CMYK
cmyk(0%, 3%, 14%, 59%)
Oklch
oklch(50.6% 0.019 95.4)

Traditional「Ochre」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

097790
902209

Analogous

099065
097790
093490

Triadic

097790
900977
779009

Split-Comp.

097790
900934
906509

Tetradic

097790
650990
902209
349009

Contrast Matrix WCAG 2.1 Contrast

097790
37B7CC
F8F6E9
B0AEA1
686559
—
2.2
Fail
4.8
AA
2.3
Fail
1.1
Fail
2.2
Fail
—
2.2
Fail
1.1
Fail
2.5
Fail
4.8
AA
2.2
Fail
—
2.1
Fail
5.4
AA
2.3
Fail
1.1
Fail
2.1
Fail
—
2.6
Fail
1.1
Fail
2.5
Fail
5.4
AA
2.6
Fail
—
White BG
5.2AA
2.4Fail
1.1Fail
2.2Fail
5.8AA
Black BG
4.1AA Large
8.8AAA
19.4AAA
9.4AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

393A8A
6E70C7
F7F7EC
AFAFA4
67675C

Deuteranopia

322A89
675DC6
F7F7ED
AFAFA5
67675D

Tritanopia

0F8584
3DC3C2
F8EFEF
B0A7A7
685E5F

Achromatopsia

595959
939393
F5F5F5
ADADAD
656565

Shades & Tints Shades & Tints

#097790

Dark
Light

#37B7CC

Dark
Light

#F8F6E9

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #097790;
  --color-2: #37b7cc;
  --color-3: #f8f6e9;
  --color-4: #b0aea1;
  --color-5: #686559;
}

SCSS

$color-1: #097790;
$color-2: #37b7cc;
$color-3: #f8f6e9;
$color-4: #b0aea1;
$color-5: #686559;

TAILWIND

colors: {
  'brand-1': '#097790',
  'brand-2': '#37b7cc',
  'brand-3': '#f8f6e9',
  'brand-4': '#b0aea1',
  'brand-5': '#686559',
}

RGB Array

[9, 119, 144], [55, 183, 204], [248, 246, 233], [176, 174, 161], [104, 101, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #097790, #37B7CC, #F8F6E9, #B0AEA1, #686559 is ideal for: 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: #097790; --color-2: #37b7cc; --color-3: #f8f6e9; --color-4: #b0aea1; --color-5: #686559. 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. 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