mirror of
https://github.com/foo-dogsquared/wiki.git
synced 2025-01-31 01:57:54 +00:00
26 lines
11 KiB
HTML
26 lines
11 KiB
HTML
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><title>Generate a color scheme based from a single color</title><script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><script id="MathJax-script" async="" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><script type="text/x-mathjax-config">
|
|
MathJax = {
|
|
tex: {
|
|
inlineMath: [ ['$','$'], ['\(','\)'] ],
|
|
displayMath: [ ['$$','$$'], ['[',']'] ]
|
|
},
|
|
options = {
|
|
processHtmlClass = "math"
|
|
}
|
|
}
|
|
</script><meta name="next-head-count" content="6"/><link rel="preload" href="/wiki/_next/static/css/52fc2ba29703df73922c.css" as="style"/><link rel="stylesheet" href="/wiki/_next/static/css/52fc2ba29703df73922c.css" data-n-g=""/><noscript data-n-css=""></noscript><link rel="preload" href="/wiki/_next/static/chunks/main-ae4733327bd95c4ac325.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/framework.9d524150d48315f49e80.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/commons.0e1c3f9aa780c2dfe9f0.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/pages/_app-8e3d0c58a60ec788aa69.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/940643274e605e7596ecea1f2ff8d83317a3fb76.4841a16762f602a59f00.js" as="script"/><link rel="preload" href="/wiki/_next/static/chunks/pages/%5B%5B...slug%5D%5D-1aa198f87ede1cd0e1dc.js" as="script"/></head><body><div id="__next"><main><h1>Generate a color scheme based from a single color</h1><section class="post-metadata"><span>Date: <!-- -->2020-11-05 17:21:58 +08:00</span><span>Date modified: <!-- -->2021-05-04 20:52:06 +08:00</span></section><nav class="toc"><ol class="toc-level toc-level-1"></ol></nav><p><a href="/wiki/2020-09-19-18-43-07">Generating human-friendly color schemes</a> has always been a disaster (for me) to figure out especially with no cursory knowledge whatsoever on color theory.
|
|
So I've been thinking how to do such thing with the result that doesn't make gouge my eyes out.
|
|
</p><p>Thus, for the solution, we'll include some opinionated things.
|
|
</p><ul><li><p>Generate a color with the HSLuv color space since it is .
|
|
</p></li><li><p>The color palette is composed of 16 colors inspired on <a href="https://www.nordtheme.com/docs/colors-and-palettes">Nord's documented color scheme</a>.
|
|
This easily provides a <a href="https://github.com/chriskempson/base16">Base16</a> color scheme generator.
|
|
</p></li><li><p>If the given color is bright, it should create a light theme.
|
|
</p></li></ul><p>Here's the procedure for the color sections.
|
|
</p><ul><li><p>For <code class="inline-code">base00</code>, invert the lightness of the color by <span class="math math-inline">\(<!-- -->\pm20<!-- -->\)</span> (e.g., <span class="math math-inline">\(<!-- -->20<!-- -->\)</span> if it's dark, <span class="math math-inline">\(<!-- -->80<!-- -->\)</span> if it's bright).
|
|
</p></li><li><p>For <code class="inline-code">base01</code> to <code class="inline-code">base07</code>, add the lightness by <span class="math math-inline">\(<!-- -->\pm5<!-- -->\)</span> to <span class="math math-inline">\(<!-- -->\pm10<!-- -->\)</span>.
|
|
You can make additional tweaks for all of the parameters (e.g., hue, saturation, lightness) of the color.
|
|
</p></li><li><p>On <code class="inline-code">base08</code> to <code class="inline-code">base0F</code>, you can make a uniquely randomized color palette as long as it is recognizable (ideally with at least 3 colors).
|
|
</p></li></ul><p>What if we want to make changes to the generation process?
|
|
One way to do it is to separate the hardcoded process into a configuration.
|
|
From there, we can set various procedures such as the <a href="https://github.com/alexmirrington/base16-spectrum-generator">usual Base16 scheme</a>, <a href="https://terminal.sexy/">terminal.sexy</a>, or your own.
|
|
</p></main></div><script id="__NEXT_DATA__" type="application/json">{"props":{"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 "},{"type":"element","tagName":"span","properties":{"className":["math","math-inline"]},"children":[{"type":"text","value":"\\("},{"type":"text","value":"\\pm10"},{"type":"text","value":"\\)"}]},{"type":"text","value":".\n You can make additional tweaks for all of the parameters (e.g., hue, saturation, lightness) of the color.\n"}]}]},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"On "},{"type":"element","tagName":"code","properties":{"className":["inline-code"]},"children":[{"type":"text","value":"base08"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{"className":["inline-code"]},"children":[{"type":"text","value":"base0F"}]},{"type":"text","value":", you can make a uniquely randomized color palette as long as it is recognizable (ideally with at least 3 colors).\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"What if we want to make changes to the generation process?\nOne way to do it is to separate the hardcoded process into a configuration.\nFrom there, we can set various procedures such as the "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/alexmirrington/base16-spectrum-generator"},"children":[{"type":"text","value":"usual Base16 scheme"}]},{"type":"text","value":", "},{"type":"element","tagName":"a","properties":{"href":"https://terminal.sexy/"},"children":[{"type":"text","value":"terminal.sexy"}]},{"type":"text","value":", or your own.\n"}]}]},"backlinks":[]},"__N_SSG":true},"page":"/[[...slug]]","query":{"slug":["2020-11-05-17-21-58"]},"buildId":"Ie9t5zutrXP6Of75Cb5xF","assetPrefix":"/wiki","nextExport":false,"isFallback":false,"gsp":true}</script><script nomodule="" src="/wiki/_next/static/chunks/polyfills-99d808df29361cf7ffb1.js"></script><script src="/wiki/_next/static/chunks/main-ae4733327bd95c4ac325.js" async=""></script><script src="/wiki/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js" async=""></script><script src="/wiki/_next/static/chunks/framework.9d524150d48315f49e80.js" async=""></script><script src="/wiki/_next/static/chunks/commons.0e1c3f9aa780c2dfe9f0.js" async=""></script><script src="/wiki/_next/static/chunks/pages/_app-8e3d0c58a60ec788aa69.js" async=""></script><script src="/wiki/_next/static/chunks/940643274e605e7596ecea1f2ff8d83317a3fb76.4841a16762f602a59f00.js" async=""></script><script src="/wiki/_next/static/chunks/pages/%5B%5B...slug%5D%5D-1aa198f87ede1cd0e1dc.js" async=""></script><script src="/wiki/_next/static/Ie9t5zutrXP6Of75Cb5xF/_buildManifest.js" async=""></script><script src="/wiki/_next/static/Ie9t5zutrXP6Of75Cb5xF/_ssgManifest.js" async=""></script></body></html> |