All Projects → ricokahler → Color2k

ricokahler / Color2k

Licence: mit
a color parsing and manipulation lib served in roughly 2kB

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Color2k

Polychrome
🎨 Easy color manipulation in ~2kb (gzipped)
Stars: ✭ 286 (-22.7%)
Mutual labels:  color, css-in-js
Colorls
A Ruby gem that beautifies the terminal's ls command, with color and font-awesome icons. 🎉
Stars: ✭ 3,896 (+952.97%)
Mutual labels:  color
Use Resize Observer
A React hook that allows you to use a ResizeObserver to measure an element's size.
Stars: ✭ 305 (-17.57%)
Mutual labels:  css-in-js
Huebee
🐝 1-click color picker
Stars: ✭ 332 (-10.27%)
Mutual labels:  color
Style9
CSS-in-JS compiler inspired by Facebook's stylex
Stars: ✭ 314 (-15.14%)
Mutual labels:  css-in-js
Hues
Colored terminal text made easy for Python and happiness.
Stars: ✭ 345 (-6.76%)
Mutual labels:  color
Styletron
⚡ Toolkit for component-oriented styling
Stars: ✭ 3,217 (+769.46%)
Mutual labels:  css-in-js
Theme Ui
Build consistent, themeable React apps based on constraint-based design principles
Stars: ✭ 4,150 (+1021.62%)
Mutual labels:  color
Pickr
🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
Stars: ✭ 3,759 (+915.95%)
Mutual labels:  color
Next Shopify Storefront
🛍 A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.
Stars: ✭ 317 (-14.32%)
Mutual labels:  css-in-js
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: ✭ 320 (-13.51%)
Mutual labels:  css-in-js
Hue
🎨 Hue is the all-in-one coloring utility that you'll ever need.
Stars: ✭ 3,306 (+793.51%)
Mutual labels:  color
Tailwindcss Theming
Tailwind CSS plugin for client-side theming using CSS variables, with dark mode support
Stars: ✭ 349 (-5.68%)
Mutual labels:  color
Colorme
Visualize CSS Color Functions?
Stars: ✭ 311 (-15.95%)
Mutual labels:  color
Css In Js Benchmarks
Stars: ✭ 360 (-2.7%)
Mutual labels:  css-in-js
Farge
Click on a pixel on your screen and show its color value
Stars: ✭ 307 (-17.03%)
Mutual labels:  color
Pixel Picker
A tiny menu bar application that helps you pick colours from your screen! 🔍✨
Stars: ✭ 318 (-14.05%)
Mutual labels:  color
Reshadow
Markup and styles that feel right
Stars: ✭ 343 (-7.3%)
Mutual labels:  css-in-js
Picassopalette
Android Lollipop Palette is now easy to use with Picasso !
Stars: ✭ 366 (-1.08%)
Mutual labels:  color
Typography.js
A powerful toolkit for building websites with beautiful design
Stars: ✭ 3,697 (+899.19%)
Mutual labels:  css-in-js

color2k
bundlephobia github status checks codecov weekly downloads semantic-release

a color parsing and manipulation lib served in roughly 2kB or less (2.8kB to be more precise)

color2k is a color parsing and manipulation library with the objective of keeping the bundle size as small as possible while still satisfying all of your color manipulation needs in an sRGB space.

The bundle size is currently 2.8kB

Size comparison

lib size
polished 11.2kB
chroma-js 13.7kB
color 7.6kB
tinycolor2 5kB
color2k 2.8kB 😎

Installation

npm i color2k

or

yarn add color2k

Usage

import { darken, transparentize } from 'color2k';

// e.g.
darken('blue', 0.1);
transparentize('red', 0.5);

How so small?

There are two secrets that keep this lib especially small:

  1. Simplicity — only handles basic color manipulation functions
  2. Less branching in code — only support two color models as outputs, namely rgba and hsla

Why only rgba and hsla as outputs?

This lib was created with the use case of CSS-in-JS in mind. At the end of the day, all that matters is that the browser can understand the color string you gave it as a background-color.

Because only those two color models are supported, we don't have to add code to deal with optional alpha channels or converting to non-browser supported color models (e.g. CMYK).

We believe that this lib is sufficient for all of your color manipulation needs. If we're missing a feature, feel free to open an issue 😎.

Credits

Heavy credits goes to polished.js and sass. Much of the implementation of this lib is copied from polished!

API and Documentation

Head over to the docs site

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].