Is the result ready to use?

The code and values are usable; recheck contrast against the final background.

button color kit for #1D4ED8

Calculated data

Coordinates and result

Every output is calculated directly from the input color using full-precision numeric transformations.

default#1D4ED86.7:1

hover#2756D16.29:1

active#1940AC8.86:1

subtle#DDE8FF1.23:1

text#FFFFFF6.7:1

border#BBD1FF1.54:1

Applied preview

Light, surface and interface

Applied sample · button

A practical result preview

States derive from the base color’s measured lightness, chroma and contrast.

Secondary canvas test

Behavior on a dark canvas

Every output is calculated directly from the input color using full-precision numeric transformations.

Output

Code and tokens

CSS

--control: #1d4ed8;
--control-hover: #2756d1;
--control-active: #1940ac;
--control-subtle: #dde8ff;
--control-text: #ffffff;

JSON

{
  "type": "ui-color",
  "preset": "button",
  "input": "1d4ed8",
  "result": "1d4ed8",
  "colors": [
    "1d4ed8",
    "2756d1",
    "1940ac",
    "dde8ff",
    "ffffff",
    "bbd1ff"
  ]
}

Continue exploring

Related tools for this color

Frequently asked questions

How is this result calculated?

Every output is calculated directly from the input color using full-precision numeric transformations.

Is the result always accessible?

No. Contrast must be measured against the final background; this page does not claim universal accessibility.