Kevin K kevnk
kevnk
/ color.js
Created
May 31, 2022 17:55
Converting web color formats in javascript - Used on https://grayscale.design
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function hexToRGB(hex) { | |
| let r = 0; | |
| let g = 0; | |
| let b = 0; | |
| if (hex.length === 4) { | |
| r = `0x${hex[1]}${hex[1]}`; | |
| g = `0x${hex[2]}${hex[2]}`; | |
| b = `0x${hex[3]}${hex[3]}`; | |
| } else if (hex.length === 7) { | |
| r = `0x${hex[1]}${hex[2]}`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Show hidden characters
| { | |
| "config": { | |
| "stylesheet": { | |
| "options": { | |
| "stylesheet.between": "-", | |
| "stylesheet.after": " ", | |
| "stylesheet.intUnit": "", | |
| }, | |
| "snippets": { | |
| // "": "sm:", |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Installation and setup: | |
| * 0. Install AlpineJS: `npm i -S alpinejs` | |
| * 1. Install AOS (we're just using their CSS): `npm i -S aos` | |
| * 2. Make sure AlpineJS is running by adding `x-data` attribute on opening `<body>` tag | |
| * 3. Add `x-aos:fade-up` on element to add animation | |
| * 4. Override defaults (500ms duration and 'ease-out-cubic' easing) by passing object of options in the expression: | |
| * eg. `x-aos:fade-up="{duration:2000,easing:'linear'}"` | |
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Installation and setup: | |
| * 0. Install AlpineJS: `npm i -S alpinejs` | |
| * 1. Make sure AlpineJS is running by adding `x-data` attribute on opening `<body>` tag | |
| * 2. Add `x-parallax="path/to/image.jpg"` on element to add parallax bg image | |
| * | |
| * PS. this code was partially generated from ChatGPT 4 | |
| */ | |
| // Helper function to load an image and return its natural dimensions |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| @layer utilities { | |
| /* Grayscale Design palette: https://grayscale.design/app?lums=93.87,82.28,68.67,49.10,40.20,32.78,13.29,9.31,6.30,2.62,1.30,0.52&palettes=%239c2733,%23b79de7,%2331c264,%236ab2d9,%23352220&filters=0%7C0,0%7C0,0%7C0,0%7C0,3.8%7C8.7&names=red,purple,green,blue,brown&labels=,,,, */ | |
| :root { | |
| --grayscale-50: 248 248 248; | |
| --grayscale-100: 234 234 234; | |
| --grayscale-200: 216 216 216; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ### Keybase proof | |
| I hereby claim: | |
| * I am kevnk on github. | |
| * I am kevnk (https://keybase.io/kevnk) on keybase. | |
| * I have a public key ASC8jx4OIKgjnjFGjW52pn1z9w9goVqKKpCFqC7Bp8uBKQo | |
| To claim this, I am signing this object: |
OlderNewer