So if you've seen my post on the LCH color space, you know that making the switch to LCH colors can help resolve some common design issues stemming from vanilla RGB, HEX, and HSL color models (basically LCH's perceptual uniformity makes it easier to select colors that have the same visual feel). Thanks to some iterative improvements, the color library I was working on then now has support for a few more colorspaces, including two flavors of LCH.
vinaypillai
/
ac-colors
ac-colors is a reactive JavaScript color library that can freely convert between RGB, HSL, HEX, XYZ, LAB, LCHab, LUV, and LCHuv, as well as handle random color generation and contrast ratio calculation.
ac-colors
ac-colors is a reactive JavaScript color library that can freely convert between sRGB, HSL, HEX, XYZ, LAB, LCHab, LUV, and LCHuv, as well as handle random color generation and contrast ratio calculation. A live color picker running on ac-colors can be found at http://colors.acutecomponents.com/.
- Installation
- Making a Color object
-
Color class API
- Object properties
-
Static methods
- Color.rgbToHsl
- Color.hslToRgb
- Color.rgbToHex
- Color.hexToRgb
- Color.rgbToXyz
- Color.xyzToRgb
- Color.xyzToLab
- Color.labToXyz
- Color.labToLCHab
- Color.lchABToLab
- Color.xyzToLuv
- Color.luvToXyz
- Color.luvToLCHuv
- Color.lchUVToLuv
- Color.luminance
- Color.random
- Color.randomFromString
- Color.randomOfType
- Color.randomOfTypeFormatted
- Color.contrastTextColor
- Color.contrastRatio
- Color.blend
- Acknowledgements
- License
Installation
Node.js
npm install --save ac-colors
Browser
Download
Download the minified transpiled ac-colors.min.js and include it in a <script> tag
<script src="ac-colors.min.js"></script>
CDN
Alternatively add this <script> tag to your body to load…
I've also recently been working on an LCH theme designer, which I've found to be quite useful when choosing colors for UI components on some of the projects I'm working on.
It defaults to LCHuv mode, featuring colors with independent incremental changes to their hue, chroma/saturation, and luminance/lightness, which is great for things like selecting a color for a button's disabled state, or choosing a shade of red for an error notification that matches look of your other notifications. Changing a color's component parts independently (such as the its luminance values in LCH mode or red values in RGB mode) makes exploring the niches of different color models pretty easy.
Top comments (0)