3
Huetone
source link: https://huetone.ardov.me/?ref=sidebar&palette=N4IgdghgtgpiBcICiAPaAHANjABABQmwBci4AaEACwFcYBnBAbVElgRAHEAnGATxAoBjAPaZhXBvEYgAxADMAbIsUDZMAIwaNqmQCMAJgYM6I606Z0AOAEw2bOhdceOdAFgDsHjzusBOP3466pbBwSAAugC%2BZCzQcIh4AJZgANaqImISTLJyudZy7jq5%2Bu4wAMxFuhCuggAMRcoQFRTy1tYQlgCsOrq%2BmgquVnVyrr46nZ217u06ZZNlYVEx4HHsAEow%2Bumi4pLS8rmuMOQ5cvq%2Bgify%2BhDuvmMtue7uCluP6mX6ruo90%2BX1LUsfRg1gBsk6ZVqcnUYJkcymtXqS1ibEQAE0YJgxAB3baZPanOSdGCWBqGXSkx5lCAFZpqSyWJoKHSCXQKdy1H4tXy6Vz6Tk6dwfSy1QYtVxtRGw9rqGFI6Io%2BKcHgwMB43bZeRQ3wwB6yQRyXW6XQ6XwQVnuSmyBQ8splK4S3yuKE%2BAqIwotdRE0Gw9SuSGIoKc3SB5ErVEgAAqMEI6qyUjU%2BRpch6ChjcitMhegl8%2BiutU6IcEb1ktQUljkEGZLSmCkEpR0iNcRJLMk51nKHtLst0oIiCvDSoAQphaHGCfJm0oUy1DPpcjPZBAIFVclY-Lo1%2BKpgbM%2BpBJ19II918-GLS-4FMTGwp1AoyiaouEKERhGB6NlJqo5aofaoA6ozpgpMYIKIGFAcmCIrykAA
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Grey-50 vs.
APCA0 – Fail
APCA0 – Fail
WCAG1 – Fail
Grey-50 vs.
APCA2.7 – Fail
APCA3.5 – Fail
WCAG1 – Fail
Grey-50 vs.
APCA101.9 – Best for text
APCA100.6 – Best for text
WCAG19.4 – AAA
LCH
350.8
130.9
216.5
Export to Figma
Install Figma Tokens . Run the plugin and open JSON tab. Copy tokens and paste there.
Hotkeys
- ↑ ↓ → ← — 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. You can even paste it somewhere as HEX
- ⌘ + 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.
Advanced 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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK