What are the hex codes in the Turquoise & Graphite Field palette?

The Turquoise & Graphite Field color palette consists of Licorice #111318, Graphite #454A54, Turquoise #74D4C7, Snow #FBFBFC.

How should I use the Turquoise & Graphite Field palette on a website?

Use Snow #FBFBFC as the background, Licorice #111318 for text, Turquoise #74D4C7 for buttons and links, and Graphite #454A54 for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Snow at 17.97:1.

Which colors in Turquoise & Graphite Field have enough contrast for text?

The highest-contrast pair is #111318 on #FBFBFC with a ratio of 17.97:1, which passes WCAG AA for normal text.

#111318Licorice

#454A54Graphite

#74D4C7Turquoise

#FBFBFCSnow

Turquoise & Graphite Field color palette

Dark Minimal Black Gray Teal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Licorice	`#111318`	`rgb(17, 19, 24)`	`hsl(223, 17%, 8%)`	`oklch(18.7% 0.011 268)`
Graphite	`#454A54`	`rgb(69, 74, 84)`	`hsl(220, 10%, 30%)`	`oklch(40.8% 0.018 264)`
Turquoise	`#74D4C7`	`rgb(116, 212, 199)`	`hsl(172, 53%, 64%)`	`oklch(80.7% 0.093 184)`
Snow	`#FBFBFC`	`rgb(251, 251, 252)`	`hsl(240, 14%, 99%)`	`oklch(98.8% 0.001 286)`

Why it works and how to use it

Turquoise & Graphite Field is a neutral-based color palette tagged dark, minimal, black. Built almost entirely from neutrals, with Turquoise (#74D4C7) as the single point of color. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

Two of the four colors are near-neutral, which leaves room for Turquoise to lead. Lightness runs from 8% to 99%. Well suited to websites, presentations and branding.

Background: Snow (#FBFBFC) is the lightest color, so it belongs on large surfaces.
Text: Licorice (#111318) on #FBFBFC gives 17.97:1, passing WCAG AAA.
Primary: Turquoise (#74D4C7) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Graphite (#454A54) for highlights, badges and hover states.

4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Licorice on Snow at 17.97:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Turquoise & Graphite Field

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#111318

#454A54

#74D4C7

#FBFBFC

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#111318` on `#FBFBFC`	Aa	17.97:1	AAA
`#111318` on `#74D4C7`	Aa	10.6:1	AAA
`#454A54` on `#FBFBFC`	Aa	8.6:1	AAA
`#454A54` on `#74D4C7`	Aa	5.08:1	AA
`#111318` on `#454A54`	Aa	2.09:1	Fail
`#74D4C7` on `#FBFBFC`	Aa	1.69:1	Fail

:root {
  --licorice: #111318;
  --graphite: #454A54;
  --turquoise: #74D4C7;
  --snow: #FBFBFC;
}

$licorice: #111318;
$graphite: #454A54;
$turquoise: #74D4C7;
$snow: #FBFBFC;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'licorice': '#111318',
        'graphite': '#454A54',
        'turquoise': '#74D4C7',
        'snow': '#FBFBFC',
      },
    },
  },
};

{
  "name": "Turquoise & Graphite Field",
  "colors": [
    "#111318",
    "#454A54",
    "#74D4C7",
    "#FBFBFC"
  ]
}

background: linear-gradient(135deg, #111318, #454A54, #74D4C7, #FBFBFC);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-09-30 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood