2.0.1 • Published 4 months ago

color-string v2.0.1

Weekly downloads
13,115,918
License
MIT
Repository
github
Last release
4 months ago

color-string

library for parsing and generating CSS color strings.

Install

npm install color-string

Usage

Parsing

colorString.get('#FFF')                          // {model: 'rgb', value: [255, 255, 255, 1]}
colorString.get('#FFFA')                         // {model: 'rgb', value: [255, 255, 255, 0.67]}
colorString.get('#FFFFFFAA')                     // {model: 'rgb', value: [255, 255, 255, 0.67]}
colorString.get('hsl(360, 100%, 50%)')           // {model: 'hsl', value: [0, 100, 50, 1]}
colorString.get('hsl(360 100% 50%)')             // {model: 'hsl', value: [0, 100, 50, 1]}
colorString.get('hwb(60, 3%, 60%)')              // {model: 'hwb', value: [60, 3, 60, 1]}

colorString.get.rgb('#FFF')                      // [255, 255, 255, 1]
colorString.get.rgb('blue')                      // [0, 0, 255, 1]
colorString.get.rgb('rgba(200, 60, 60, 0.3)')    // [200, 60, 60, 0.3]
colorString.get.rgb('rgba(200 60 60 / 0.3)')     // [200, 60, 60, 0.3]
colorString.get.rgb('rgba(200 60 60 / 30%)')     // [200, 60, 60, 0.3]
colorString.get.rgb('rgb(200, 200, 200)')        // [200, 200, 200, 1]
colorString.get.rgb('rgb(200 200 200)')          // [200, 200, 200, 1]

colorString.get.hsl('hsl(360, 100%, 50%)')       // [0, 100, 50, 1]
colorString.get.hsl('hsl(360 100% 50%)')         // [0, 100, 50, 1]
colorString.get.hsl('hsla(360, 60%, 50%, 0.4)')  // [0, 60, 50, 0.4]
colorString.get.hsl('hsl(360 60% 50% / 0.4)')    // [0, 60, 50, 0.4]

colorString.get.hwb('hwb(60, 3%, 60%)')          // [60, 3, 60, 1]
colorString.get.hwb('hwb(60, 3%, 60%, 0.6)')     // [60, 3, 60, 0.6]

colorString.get.rgb('invalid color string')      // null

Generation

colorString.to.hex(255, 255, 255)     // "#FFFFFF"
colorString.to.hex(0, 0, 255, 0.4)    // "#0000FF66"
colorString.to.hex(0, 0, 255, 0.4)    // "#0000FF66"
colorString.to.rgb(255, 255, 255)     // "rgb(255, 255, 255)"
colorString.to.rgb(0, 0, 255, 0.4)    // "rgba(0, 0, 255, 0.4)"
colorString.to.rgb(0, 0, 255, 0.4)    // "rgba(0, 0, 255, 0.4)"
colorString.to.rgb.percent(0, 0, 255) // "rgb(0%, 0%, 100%)"
colorString.to.keyword(255, 255, 0)   // "yellow"
colorString.to.hsl(360, 100, 100)     // "hsl(360, 100%, 100%)"
colorString.to.hwb(50, 3, 15)         // "hwb(50, 3%, 15%)"

License

MIT

colorcuc-gaf@azurerodrigo/react-native-monorepo-icon-splasheasy-select-rnvuedragdropuploadimages@tina-form/color-fieldcloud-archive-s3bb-chat@ihikmawan/tailwindcss-multi-theme-l2human-color@fundefund/funde_ckgql_din_mod@olivervorasai/slider@mkiloyan/renderer-reactukor-remasterwilscannerscss-replace@everything-registry/sub-chunk-1355temporary-react-pdfp149-tabletailwind-vector-effecttailwindcss-glowtailwind-templatetailwind-rntailwind-rn-webtest-jazzweb-elements-iconsvue-jazzicon-3vue-button-test1whatsconcsticky-scroll-catchsvg-casterswitch-animationvue-compmentvegovcomponentslibvs-tree-plus@cronus-finance/widgets@creenv/color@creenv/gui@ctfdio/picocss-themes@ct-note/table@componlyco/core@dafunda-ui/utils@rnv/sdk-utilsgenerator-bootstrap-boilerplate-templatejibo-sdkis-css3-colorjesusdemojsassjson2ableton-live-skinkafirchain-tetrisjupyterlab-mavenworksqjc2-blockgridsome-makechain_digger@ozymandiasthegreat/react-native-markdownlogin-encrypt-ziostyle-vars-panelsprite-utilssprite-coresquashfold-uistock-ticker-react-widgettingzi-vuepresstinacms@aics/web-3d-viewer@antv/scale@armco/svg-canvas@artiso-solutions/vue-html-to-paper@apollosproject/react-native-make@andromedaprotocol/utils@asutrick/react-pdf-render@asutrick/react-pdf-stylesheet@asiz33/smartblok-vendure-plugin@agogpixel/phaser3-glyph-plugin@ads.silva/render@ads.silva/stylesheet@akasha-platform/craftjs-tools@akasha-platform/vendure-craftjs@ajaykewat/myboilerplate@alexnus/ui-utils@bam.tech/react-native-make@bibleproject/flow-cli@bibleproject/flow-toolkit@carhoo/widget-dealers@cawfree/lottie-mutate@3mo/color@abtion-oss/design-system-colors@adishare/react-native-make@codenation/tinacms@deepui/utils@devorso/dcountdown@diez/generation@digidem/react-pdf-stylesheet@darwishdev/dash-dev@contagt/metismenuvue-sequenceverify-img-codevformlmq@duotone/react
2.0.1

4 months ago

2.0.0

4 months ago

1.9.1

3 years ago

1.8.2

4 years ago

1.9.0

4 years ago

1.8.1

4 years ago

1.8.0

4 years ago

1.7.3

4 years ago

1.7.2

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.7.4

4 years ago

1.6.0

4 years ago

1.5.5

4 years ago

1.5.4

5 years ago

1.5.3

7 years ago

1.5.2

8 years ago

1.5.1

8 years ago

1.5.0

8 years ago

1.4.0

9 years ago

1.3.1

9 years ago

1.3.0

9 years ago

1.2.0

9 years ago

1.1.1

9 years ago

1.1.0

9 years ago

1.0.1

9 years ago

1.0.0

9 years ago

0.4.0

9 years ago

0.3.0

10 years ago

0.2.4

10 years ago

0.2.3

11 years ago

0.2.2

11 years ago

0.2.1

11 years ago

0.2.0

11 years ago

0.1.3

11 years ago

0.1.2

12 years ago

0.1.1

14 years ago

0.1.0

14 years ago