Huetone

Yellow-400 vs.

APCA60 – Ok for text

APCA65 – Ok for text

WCAG3.5 – AA (large & UI components)

Yellow-400 vs.

APCA65 – Ok for text

APCA71 – Ok for text

WCAG3.8 – AA (large & UI components)

Yellow-400 vs.

APCA36 – Not for reading text

APCA39 – Not for reading text

WCAG5.4 – AA (normal), AAA (large)

{
  "name": "Example Palette",
  "hues": [
    {
      "name": "Grey",
      "colors": [
        "#f6f6f6",
        "#e1e1e1",
        "#bdbdbd",
        "#a1a1a1",
        "#828282",
        "#626262",
        "#474747",
        "#292929",
        "#181818"
      ]
    },
    {
      "name": "Pink",
      "colors": [
        "#fff2f7",
        "#ffd7e3",
        "#fba4c0",
        "#ff6fa3",
        "#f22a85",
        "#b91e64",
        "#8c0f49",
        "#55072a",
        "#350318"
      ]
    },
    {
      "name": "Red",
      "colors": [
        "#fff4ee",
        "#ffd9ce",
        "#fda799",
        "#ff776d",
        "#f13d41",
        "#b72e30",
        "#891e20",
        "#530f10",
        "#350700"
      ]
    },
    {
      "name": "Yellow",
      "colors": [
        "#fff5e8",
        "#ffdbb8",
        "#f3af73",
        "#e88a36",
        "#cb6701",
        "#9b4d01",
        "#713804",
        "#422000",
        "#2a1100"
      ]
    },
    {
      "name": "Green",
      "colors": [
        "#f0f9e9",
        "#cfe9bb",
        "#9acb78",
        "#69b33e",
        "#42940f",
        "#2f7007",
        "#1f5200",
        "#143000",
        "#101b00"
      ]
    },
    {
      "name": "Teal",
      "colors": [
        "#e2faff",
        "#b6eaf8",
        "#76c9de",
        "#05b0cd",
        "#068fa6",
        "#076c7e",
        "#004f5d",
        "#012e37",
        "#011b20"
      ]
    },
    {
      "name": "Blue",
      "colors": [
        "#f4f6ff",
        "#dbdfff",
        "#aabaff",
        "#829bff",
        "#407cf8",
        "#1c5dc8",
        "#1d4294",
        "#09265e",
        "#06163b"
      ]
    }
  ],
  "tones": [
    "50",
    "100",
    "200",
    "300",
    "400",
    "500",
    "600",
    "700",
    "800"
  ]
}

Exports

Figma. Install Figma Tokens. Run the plugin and open JSON tab. Copy tokens and paste there.

Hotkeys

1 - 9 — switch palette
↑ ↓ → ← — select another color
⌘ + ↑ ↓ → ← — move rows and columns
⌘ + ⇧ + ↑ ↓ → ← — duplicate rows and columns
L + ↑ ↓ — change lightness of selected color
C + ↑ ↓ — change chroma of selected color
H + ↑ ↓ — change hue of selected color
⌘ + C — copy selected color as hex.
⌘ + ⇧ + C — copy selected color in lch() format. Note that it has limited browser support.
⌘ + V — paste color. Just copy color in any format and paste it here.
Hold B — preview palette in greys.

Credits

Made by Alexey Ardov. Contact me if you have any suggestions.

Huetone is heavily inspired by that Stripe article. And it uses the great chroma.js library under the hood.

Special thanks for Lea Verou, Chris Lilley and the CSS working group for providing all the essential code for color conversions.

Accessible Perceptual Contrast Algorithm (APCA) by Andrew Somers is a WCAG 3 working draft and may change later. To learn more visit this page or check this thread on GitHub.