wiki/_next/data/Ie9t5zutrXP6Of75Cb5xF/2020-11-05-17-21-58.json

{"pageProps":{"metadata":{"date":"\"2020-11-05 17:21:58 +08:00\"","date_modified":"\"2021-05-04 20:52:06 +08:00\"","language":"en","source":""},"title":"Generate a color scheme based from a single color","hast":{"type":"root","children":[{"type":"element","tagName":"nav","properties":{"className":"toc"},"children":[{"type":"element","tagName":"ol","properties":{"className":"toc-level toc-level-1"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/2020-09-19-18-43-07"},"children":[{"type":"text","value":"Generating human-friendly color schemes"}]},{"type":"text","value":" has always been a disaster (for me) to figure out especially with no cursory knowledge whatsoever on color theory.\nSo I've been thinking how to do such thing with the result that doesn't make gouge my eyes out.\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Thus, for the solution, we'll include some opinionated things.\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Generate a color with the HSLuv color space since it is .\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The color palette is composed of 16 colors inspired on "},{"type":"element","tagName":"a","properties":{"href":"https://www.nordtheme.com/docs/colors-and-palettes"},"children":[{"type":"text","value":"Nord's documented color scheme"}]},{"type":"text","value":".\n  This easily provides a "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/chriskempson/base16"},"children":[{"type":"text","value":"Base16"}]},{"type":"text","value":" color scheme generator.\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the given color is bright, it should create a light theme.\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here's the procedure for the color sections.\n"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For "},{"type":"element","tagName":"code","properties":{"className":["inline-code"]},"children":[{"type":"text","value":"base00"}]},{"type":"text","value":", invert the lightness of the color by "},{"type":"element","tagName":"span","properties":{"className":["math","math-inline"]},"children":[{"type":"text","value":"\\("},{"type":"text","value":"\\pm20"},{"type":"text","value":"\\)"}]},{"type":"text","value":" (e.g., "},{"type":"element","tagName":"span","properties":{"className":["math","math-inline"]},"children":[{"type":"text","value":"\\("},{"type":"text","value":"20"},{"type":"text","value":"\\)"}]},{"type":"text","value":" if it's dark, "},{"type":"element","tagName":"span","properties":{"className":["math","math-inline"]},"children":[{"type":"text","value":"\\("},{"type":"text","value":"80"},{"type":"text","value":"\\)"}]},{"type":"text","value":" if it's bright).\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For "},{"type":"element","tagName":"code","properties":{"className":["inline-code"]},"children":[{"type":"text","value":"base01"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{"className":["inline-code"]},"children":[{"type":"text","value":"base07"}]},{"type":"text","value":", add the lightness by "},{"type":"element","tagName":"span","properties":{"className":["math","math-inline"]},"children":[{"type":"text","value":"\\("},{"type":"text","value":"\\pm5"},{"type":"text","value":"\\)"}]},{"type":"text","value":" to "},{