← Back to Editor

#745751 · #897157 · #96D4E1 · #7BC7D7 · #D7BDAC

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

#745751

Crimson · DimGray · Wine Red

HEX
#745751
RGB
rgb(116, 87, 81)
HSL
hsl(10, 18%, 39%)
HSB
hsb(10, 30%, 45%)
CMYK
cmyk(0%, 25%, 30%, 55%)
Oklch
oklch(48.5% 0.040 31.9)

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

#897157

Ochre · DimGray · Amber Brown

HEX
#897157
RGB
rgb(137, 113, 87)
HSL
hsl(31, 22%, 44%)
HSB
hsb(31, 36%, 54%)
CMYK
cmyk(0%, 18%, 36%, 46%)
Oklch
oklch(56.5% 0.048 68.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#96D4E1

Sky Blue · SkyBlue · Lake Green

HEX
#96D4E1
RGB
rgb(150, 212, 225)
HSL
hsl(190, 56%, 74%)
HSB
hsb(190, 33%, 88%)
CMYK
cmyk(33%, 6%, 0%, 12%)
Oklch
oklch(83.2% 0.065 212.1)

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

#7BC7D7

Sky Blue · SkyBlue · Lake Green

HEX
#7BC7D7
RGB
rgb(123, 199, 215)
HSL
hsl(190, 53%, 66%)
HSB
hsb(190, 43%, 84%)
CMYK
cmyk(43%, 7%, 0%, 16%)
Oklch
oklch(78.6% 0.079 212.5)

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

#D7BDAC

Apricot · Silver · Peach Orange

HEX
#D7BDAC
RGB
rgb(215, 189, 172)
HSL
hsl(24, 35%, 76%)
HSB
hsb(24, 20%, 84%)
CMYK
cmyk(0%, 12%, 20%, 16%)
Oklch
oklch(81.6% 0.038 55.3)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

745751
526F75

Analogous

75525D
745751
756952

Triadic

745751
527558
585275

Split-Comp.

745751
527569
525D75

Tetradic

745751
5D7552
526F75
695275

Contrast Matrix WCAG 2.1 Contrast

745751
897157
96D4E1
7BC7D7
D7BDAC
—
1.4
Fail
4.0
AA Large
3.4
AA Large
3.6
AA Large
1.4
Fail
—
2.8
Fail
2.4
Fail
2.6
Fail
4.0
AA Large
2.8
Fail
—
1.2
Fail
1.1
Fail
3.4
AA Large
2.4
Fail
1.2
Fail
—
1.1
Fail
3.6
AA Large
2.6
Fail
1.1
Fail
1.1
Fail
—
White BG
6.5AA
4.6AA
1.6Fail
1.9Fail
1.8Fail
Black BG
3.2AA Large
4.6AA
12.8AAA
11.0AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

676752
7F7E5D
B1B1DE
9C9DD3
CCCCB0

Deuteranopia

696B53
80825F
ADA9DD
9892D2
CDCFB1

Tritanopia

735454
886263
99DBDB
7FD0CF
D6B3B4

Achromatopsia

5F5F5F
757575
C3C3C3
B2B2B2
C3C3C3

Shades & Tints Shades & Tints

#745751

Dark
Light

#897157

Dark
Light

#96D4E1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #745751;
  --color-2: #897157;
  --color-3: #96d4e1;
  --color-4: #7bc7d7;
  --color-5: #d7bdac;
}

SCSS

$color-1: #745751;
$color-2: #897157;
$color-3: #96d4e1;
$color-4: #7bc7d7;
$color-5: #d7bdac;

TAILWIND

colors: {
  'brand-1': '#745751',
  'brand-2': '#897157',
  'brand-3': '#96d4e1',
  'brand-4': '#7bc7d7',
  'brand-5': '#d7bdac',
}

RGB Array

[116, 87, 81], [137, 113, 87], [150, 212, 225], [123, 199, 215], [215, 189, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #745751, #897157, #96D4E1, #7BC7D7, #D7BDAC 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: #745751; --color-2: #897157; --color-3: #96d4e1; --color-4: #7bc7d7; --color-5: #d7bdac. 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