DEV Community

Sanchit Gupta
Sanchit Gupta

Posted on

Snippet... Color Converter

#javascript #color #w3colorjs #apps4developers

https://www.apps4developers.com/color-converter/

Convert Color code using w3color.js

Get w3color.js from here.

import w3color from './w3color';

const colorObj = w3color(`#424242`);
Enter fullscreen mode Exit fullscreen mode

Get Color Name 

colorObj.toName();
Enter fullscreen mode Exit fullscreen mode

Get Hex Code 

colorObj.toHexString();
Enter fullscreen mode Exit fullscreen mode

Get RGB Code 

colorObj.toRgbString();
Enter fullscreen mode Exit fullscreen mode

Get RGB Code with Alpha 

colorObj.toRgbaString();
Enter fullscreen mode Exit fullscreen mode

Get HSL Code 

colorObj.toHslString();
Enter fullscreen mode Exit fullscreen mode

Get HSL Code with Alpha 

colorObj.toHslaString();
Enter fullscreen mode Exit fullscreen mode

Get HSL Decimal Code 

colorObj.toHslStringDecimal();
Enter fullscreen mode Exit fullscreen mode

Get HWB Code 

colorObj.toHwbString();
Enter fullscreen mode Exit fullscreen mode

Get HWB Code with Alpha 

colorObj.toHwbaString();
Enter fullscreen mode Exit fullscreen mode

Get HWB Decimal Code 

colorObj.toHwbStringDecimal();
Enter fullscreen mode Exit fullscreen mode

Get CMYK Code 

colorObj.toCmykString();
Enter fullscreen mode Exit fullscreen mode

Get CMYK Decimal Code 

colorObj.toCmykStringDecimal();
Enter fullscreen mode Exit fullscreen mode

Get NCOL Code 

colorObj.toNcolString();
Enter fullscreen mode Exit fullscreen mode

Get NCOL Code with Alpha 

colorObj.toNcolaString();
Enter fullscreen mode Exit fullscreen mode

Get NCOL Decimal Code 

colorObj.toNcolStringDecimal();
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

mayallo profile image

Unit, Integration, and E2E Testing in One Example Using Jest

Mohamed Mayallo -

bookercodes profile image

Learn useActionState quickly with an example (Next.js 15)

Alex Booker -

michelledey4you profile image

Created a Npm package for Vite, React Tailwindcss starter code with configuration.

Plain -

sajaddp profile image

How to Learn TypeScript in One Day?

Sajad DP -