#680700

Accessibility

AAA

12.97:1

Vs white / black

12.97:1 · 1.62:1

Sources

Library color

Codes

Formats

HEX

#680700

RGB

rgb(104, 7, 0)

RGBA

rgba(104, 7, 0, 1)

HSL

hsl(4, 100%, 20%)

HSLA

hsla(4, 100%, 20%, 1)

HSV

hsv(4, 100%, 41%)

LAB

lab(20.42% 39.69 31.02)

LCH

lch(20.42% 50.37 38.01)

OKLAB

oklab(0.3293 0.1109 0.0661)

OKLCH

oklch(0.3293 0.1291 30.8)

XYZ

xyz(5.79, 3.10, 0.29)

CMYK

cmyk(0%, 93%, 100%, 59%)

CSS

color: #680700;

CSS variable

--color-680700: #680700;

SCSS

$color-680700: #680700;

JavaScript

const color = "#680700";

TypeScript

const color: string = "#680700";

React

style={{ backgroundColor: "#680700" }}

JSON

{ "hex": "#680700", "rgb": { "r": 104, "g": 7, "b": 0 }, "oklch": "oklch(0.3293 0.1291 30.8)" }

Export

Developer code

css

:root {
  --#680700-1: #680700;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

red-900

Very different · ΔE 6.51 · #7F1D1D

Nearest CSS named color

Maroon

Noticeably different · ΔE 4.81 · #800000

Nearest Material color

brown-800

Very different · ΔE 15.41 · #4E342E

Nearest Bootstrap color

danger

Very different · ΔE 25.8 · #DC3545

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50ffe2d6 100ffd3c6 200ffbcac 300ffa191 400e7816f 500c86555 600a85346 700894135 8006a3026 9004d1f18 950330c06

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

f2eaea e6d6d5 d9c1bf cdacaa c09895 b48380 a76e6a 9a5a55 8e4540 81302b 751c15 680700 5f0600 570600 4e0500 450500 3d0400 340400 2b0300 230200 1a0200 110100 090100

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f2eaea e6d6d5 d9c1bf cdacaa c09895 b48380 a76e6a 9a5a55 8e4540 81302b 751c15

Palette

Shades

Mixed toward black — depth, text, and emphasis

5f0600 570600 4e0500 450500 3d0400 340400 2b0300 230200 1a0200 110100 090100

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

6a110b 6c1b15 6e2520 702f2b 723935 744440 764e4b 785855 7a6260 7c6c6b 7e7675

Harmony

Complementary

Opposite on the color wheel for contrast

#680700Stop 1 #005F66Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#66002CStop 1 #680700Stop 2 #663A00Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#680700Stop 1 #006607Stop 2 #070066Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#680700Stop 1 #00663AStop 2 #002C66Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#660700Stop 1 #B30C00Stop 2 #FF1100Stop 3 #FF584DStop 4 #FFA099Stop 5

Using this color

Where #680700 works

#680700 (#680700) sits in the red family at about 4° hue, 100% saturation, and 20% lightness. Contrast is 12.97:1 on white and 1.62:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: red-900 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas

On a black or near-black UI, #680700 is 1.62:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Energy, urgency, passion, and excitement. Often used for CTAs, alerts, and brands that want attention. Common uses still include buttons, charts, and accents in the Red range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Web Safe #660000#660000 Maroon#800000 Spectrum #84170B#84170B Tailwind red 900#7F1D1D Spectrum #81230E#81230E DarkRed#8B0000 Spectrum #792B25#792B25 Tailwind orange 900#7C2D12 Spectrum #713228#713228 Spectrum #8F2519#8F2519 Tailwind orange 950#431407 Tailwind red 950#450A0A