├── .babelrc ├── .env ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── bin ├── postBuildNpm.sh └── preBuildNpm.sh ├── docs └── validate-color-logo-github-full-width.png ├── package-lock.json ├── package.json ├── public ├── apple-touch-icon-114x114.png ├── apple-touch-icon-120x120.png ├── apple-touch-icon-144x144.png ├── apple-touch-icon-152x152.png ├── apple-touch-icon-57x57.png ├── apple-touch-icon-72x72.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── index.html ├── manifest.json ├── mstile-144x144.png ├── validate-color-og-alt.png └── validate-color-og.png ├── src ├── app │ ├── App.js │ ├── App.scss │ ├── App.test.js │ └── components │ │ ├── Footer.js │ │ ├── Input.js │ │ └── Input.scss ├── index.js ├── index.scss ├── serviceWorker.js ├── styles │ ├── _layout.scss │ └── _variables.scss ├── utils │ ├── copyToClipboardUtil.js │ ├── isEmptyUtil.js │ └── isEmptyUtil.test.js └── validate-color │ ├── index.d.ts │ ├── index.js │ └── index.test.js └── webpack.config.npm.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | PORT=9900 2 | SKIP_PREFLIGHT_CHECK=true 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # assets necessary for the application 4 | # but too large to be tracked, like .psd files 5 | /_assets 6 | 7 | # dependencies 8 | /node_modules 9 | /.pnp 10 | .pnp.js 11 | 12 | # testing 13 | /coverage 14 | 15 | # production 16 | /build 17 | /lib 18 | 19 | # development mode 20 | .env.* 21 | README_* 22 | 23 | # misc 24 | .DS_Store 25 | 26 | # logs 27 | npm-debug.log* 28 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # assets necessary for the application 4 | # but too large to be tracked, like .psd files 5 | /_assets 6 | 7 | # dependencies 8 | /node_modules 9 | /.pnp 10 | .pnp.js 11 | 12 | # testing 13 | /coverage 14 | 15 | # production 16 | /build 17 | /bin 18 | /public 19 | 20 | # documentation 21 | /docs 22 | 23 | # development mode 24 | .babelrc 25 | .env 26 | .env.* 27 | .travis* 28 | /src 29 | TODO.md 30 | README_* 31 | webpack.config.* 32 | package-lock.json 33 | 34 | # misc 35 | .DS_Store 36 | 37 | # logs 38 | npm-debug.log* 39 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | cache: 3 | directories: node_modules 4 | node_js: 12 5 | script: 6 | - npm install react react-dom 7 | - npm run testTravis 8 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Wallace Sidhrée 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Validate Color](https://raw.githubusercontent.com/dreamyguy/validate-color/master/docs/validate-color-logo-github-full-width.png "Validate all possible HTML colors!") 2 | 3 | # Validate Color 4 | 5 | > ✅🌈🙌 Validate HTML colors by `name`, `special name`, `hex`, `rgb`, `rgba`, `hsl`, `hsla`, `hwb`, `lab` or `lch` values 6 | 7 | [![Build Status](https://travis-ci.com/dreamyguy/validate-color.svg?branch=master)](https://travis-ci.org/dreamyguy/validate-color) [![Node Version](https://img.shields.io/badge/node-v12.4.0-brightgreen.svg)](https://github.com/nodejs/node/releases/tag/v12.4.0) 8 | [![NPM Version](https://img.shields.io/badge/npm-v6.9.0-brightgreen.svg)](https://github.com/npm/cli/releases/tag/v6.9.0) 9 | [![MIT Licence](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/dreamyguy/validate-color/blob/master/LICENSE) 10 | 11 | **_HTML colors are remarkably easy to get wrong_**, because they allow for so many different values. 12 | 13 | As I was writing [Console Log Plus](https://github.com/dreamyguy/console-log-plus), I thought it would be great to allow users to pass any _HTML color_ they wanted as one of the parameter to the function. But since _HTML colors_ have so many variations and therefore are complex strings, it didn't take me long to realize that I'd have to make quite a few checks to validate the value passed by the user. That need brought me here. 14 | 15 | **Validate Color** let's one validate the color string against all current possible _HTML color_ values. Some examples: 16 | 17 | - `hex` - `#bada55` 18 | - `name` - `LightGoldenrodYellow` 19 | - `special name` - `currentColor` 20 | - `rgb` - `rgb(0 0 0)` 21 | - `rgba` - `rgba(0, 0, 0, .45)` 22 | - `hsl` - `hsl(4.71239rad, 60%, 70%)` 23 | - `hsla` - `hsla(180deg 100% 50% / .8)` 24 | - `hwb` - `hwb(180deg 0% 0% / 100%)` 25 | - `lab` - `lab(2000.1337% -8.6911 -159.131231 / .987189732)` 26 | - `lch` - `lch(54.292% 106.839 40.853)` 27 | 28 | Both `rgba` and `hsla` are now officially merged into their `rgb` and `hsl` counterparts, so the `a` can be omitted. The `a` is considered legacy syntax, so it will still work. 29 | 30 | # Demo ✅ 🌈 🙌 31 | 32 | To demonstrate the power of _validate-color_, I decided it would be best to create a living github page, that would serve both as a way of showcase _validate-color_, and facilitate its use: 33 | 34 | [https://dreamyguy.github.io/validate-color/][7] 35 | 36 | On this page you can: 37 | 38 | - **Validate HTML colors as you type** 39 | 40 | _On my TODO list:_ 41 | 42 | - _See opaque colors against black and white backgrounds._ 43 | - _See colors with transparency in different contexts._ 44 | 45 | # Usage 46 | 47 | **validate-color** is also [available as a package on `npm`][6] and can be installed as a depedency with: 48 | 49 | npm i validate-color --save 50 | 51 | As with any node module, first you'll have to import it with `require`: 52 | 53 | ```javascript 54 | var validateColor = require("validate-color").default; 55 | ``` 56 | 57 | ...or through `import`: 58 | 59 | ```javascript 60 | import validateColor from "validate-color"; 61 | ``` 62 | 63 | Once you've done the import, you'll be able to do checks like (example in **React**): 64 | 65 | ```javascript 66 | import React from "react"; 67 | import validateColor from "validate-color"; 68 | 69 | const ColorBox = (props) => { 70 | const { color = "", text = "" } = props; 71 | const theColor = color && validateColor(color) ? color : "transparent"; 72 | return ( 73 |
74 |

{text}

75 |
76 | ); 77 | }; 78 | 79 | export default ColorBox; 80 | ``` 81 | 82 | > 👉 The source for a full-fledged color validation component can be [viewed here](https://github.com/dreamyguy/validate-color/blob/master/src/app/App.js). That component can be [seen in action here][7]. 83 | 84 | # Extend 85 | 86 | One can "extend" the library by using only parts of it. 87 | 88 | **1. Validate only HTML colors (`hex`, `rgb`, `rgba`, `hsl`, `hsla`, `hwb`, `lab`, `lch`), without `name`** 89 | 90 | ```javascript 91 | import { validateHTMLColor } from "validate-color"; 92 | ``` 93 | 94 | **2. Validate only `HEX` colors** 95 | 96 | ```javascript 97 | import { validateHTMLColorHex } from "validate-color"; 98 | ``` 99 | 100 | **3. Validate only `HSL` colors** 101 | 102 | ```javascript 103 | import { validateHTMLColorHsl } from "validate-color"; 104 | ``` 105 | 106 | **4. Validate only `NAME` colors** 107 | 108 | ```javascript 109 | import { validateHTMLColorName } from "validate-color"; 110 | ``` 111 | 112 | **5. Validate only `RGB` colors** 113 | 114 | ```javascript 115 | import { validateHTMLColorRgb } from "validate-color"; 116 | ``` 117 | 118 | **6. Validate only `SPECIAL NAME` colors** 119 | 120 | ```javascript 121 | import { validateHTMLColorSpecialName } from "validate-color"; 122 | ``` 123 | 124 | **7. Validate only `HWB` colors** 125 | 126 | ```javascript 127 | import { validateHTMLColorHwb } from "validate-color"; 128 | ``` 129 | 130 | **8. Validate only `LAB` colors** 131 | 132 | ```javascript 133 | import { validateHTMLColorLab } from "validate-color"; 134 | ``` 135 | 136 | **9. Validate only `LCH` colors** 137 | 138 | ```javascript 139 | import { validateHTMLColorLch } from "validate-color"; 140 | ``` 141 | 142 | > 👉 I was proactive and added validation to these relatively new HTML/CSS colors (**HWB** & **LAB** & **LCH**), but since [they're still drafts at the time of this writing][9], they might still be not fully supported at the time of this reading. 143 | 144 | # Preventing ReDoS (`regex` denial-of-service) attacks 145 | 146 | A ReDoS vulnerability [was reported as an issue](https://github.com/dreamyguy/validate-color/issues/28) on Oct 14, 2022, but that went under my radar. It was just today (Jan 29, 2023) I came across the issue, and luckily I had time to look into it. 147 | 148 | This vulnerability was officially reported as **`CVE-2021-40892`**, and is listed a few places: [1](https://nvd.nist.gov/vuln/detail/CVE-2021-40892), [2](https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2021-40892), [3](https://security.snyk.io/vuln/SNYK-JS-VALIDATECOLOR-2935878), [4](https://cve.report/CVE-2021-40892), [5](https://feedly.com/cve/CVE-2021-40892). 149 | 150 | A similar problem was reported for the [`color-string` package](https://security.snyk.io/vuln/SNYK-JS-COLORSTRING-1082939), versions < 1.5.5. 151 | 152 | A good article by Godson Obielum: [How to protect against regex denial-of-service (ReDoS) attacks](https://blog.logrocket.com/protect-against-regex-denial-of-service-redos-attacks/). 153 | 154 | The issue is caused by the "greedy" character in `regex`, the infamous `+`. I've made amendments that limit the number of both spaces and digits by `5`, instead of having no limits. 155 | 156 | I've also made patterns stricter and removed redundant optionals, simplifying whenever possible. 157 | 158 | > 👉 All current `regex` have been tested with https://regex.rip/ and `npx redos-detector check "" --maxSteps 10000)` (see [redos-detector](https://www.npmjs.com/package/redos-detector) for more options). 159 | 160 | **That will, from this point onwards, invalidate otherwise valid colors that cross that threshold.** 161 | 162 | Since this is an important update, I'm releasing it as a patch ([`v2.2.3`](https://github.com/dreamyguy/validate-color/releases/tag/v2.2.3)) 163 | 164 | # Development 165 | 166 | ## Getting started 167 | 168 | Clone this repo locally. You'll need to have [NodeJS][1] installed. Install all dependencies by running: 169 | 170 | npm i 171 | 172 | ## Run it locally 173 | 174 | To start the app locally, run: 175 | 176 | npm run start 177 | 178 | This command fires up the application on port `9900`, making it visible on http://localhost:9900. Because this app is based on [create-react-app][2], the port number should be configured on the [.env](https://github.com/dreamyguy/validate-color/blob/master/.env#L1) file. 179 | 180 | ## Building the frontend for Production 181 | 182 | When you're ready to build for production, run: 183 | 184 | npm run build 185 | 186 | This command compiles all production-optimised resources to a folder called **build**. It's meant to be run remotely, at the environment host, at build time. 187 | 188 | ## Building for NPM 189 | 190 | When you're done with your changes, run: 191 | 192 | npm run build-npm 193 | 194 | This command compiles the distribution-optimised `javascript` to `lib/index.js`, a file compiled out of [src/validate-color/index.js][3]. 195 | 196 | > 👉 Note that the `lib/` folder and its contents are only available at the [NPM distribution][6]. 197 | 198 | # Testing 199 | 200 | This project wouldn't be complete without proper testing. 201 | 202 | [Jest][4] is my Unit Testing framework of choice. It's well documented and shares good practices & syntax with its most known predecessors (Mocha, Jasmine, etc). [Babel][5] was introduced as a dependency to the project because of Jest, but it was worth it since now we can use **ES6** syntax on our tests as well. 203 | 204 | Run all tests, in watch mode: 205 | 206 | npm run test 207 | 208 | Tests are also run through [Travis][8] on every push to `master`. The build status is shown [at the top of this README](https://github.com/dreamyguy/validate-color#validate-color). 209 | 210 | > 👉 All tests are named according to the file they're testing: `index.js` -> _`index.test.js`_, and reside under the same directory. Since `Jest` comes as courtesy of [CRA][2], all tests should be placed under the [src/](https://github.com/dreamyguy/validate-color/blob/master/src/) folder. 211 | 212 | # Deploying 213 | 214 | This repo is a hybrid one. It: 215 | 216 | - Builds the NPM distribution 217 | - Builds the GitHub Page that serves as a demo/showcase 218 | 219 | There are 3 commands one can run to deploy to these two places. 220 | 221 | **Deploy to GitHub Pages** 222 | 223 | npm run deploy 224 | 225 | **Deploy to NPM** 226 | 227 | npm run deploy-npm 228 | 229 | **Deploy to both places at once** 230 | 231 | npm run release 232 | 233 | > ⚠️ Make sure to bump version before releasing! 234 | 235 | ## Good to know 236 | 237 | ### License 238 | 239 | [MIT](LICENSE) 240 | 241 | ### Credits & Resources 242 | 243 | - [Source from which the color name list was extracted from](https://htmlcolorcodes.com/color-names/) 244 | - [The Ultimate Guide to CSS Colors 2020 Edition](https://dev.to/alvaromontoro/the-ultimate-guide-to-css-colors-2020-edition-1bh1#hsl) 245 | - [MDN: CSS Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) 246 | - [MDN: Color Picker tool](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) 247 | - [CSS Color Module Level 4 Editor's Draft][9] 248 | - [Lea Verou: LCH colors in CSS: what, why, and how?][10] 249 | - [LCH Colour Picker][11] 250 | 251 | ### About 252 | 253 | **Validate Color** was put together by [Wallace Sidhrée][1]. 👨‍💻🇳🇴 254 | 255 | [1]: http://sidhree.com/ 256 | [2]: https://facebook.github.io/create-react-app/ 257 | [3]: https://github.com/dreamyguy/validate-color/blob/master/src/validate-color/index.js 258 | [4]: https://jestjs.io/ 259 | [5]: https://babeljs.io/ 260 | [6]: https://www.npmjs.com/package/validate-color 261 | [7]: https://dreamyguy.github.io/validate-color/ 262 | [8]: https://travis-ci.com/dreamyguy/validate-color 263 | [9]: https://drafts.csswg.org/css-color/ 264 | [10]: https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ 265 | [11]: https://css.land/lch/ 266 | -------------------------------------------------------------------------------- /bin/postBuildNpm.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Do something after 'build-npm' is done 4 | 5 | # Copy the intended component file the project's index / entrypoint 6 | echo '🎈 build-npm was completed' 7 | echo '🎯 Copy type definitions to lib/' 8 | cp src/validate-color/index.d.ts lib/index.d.ts 9 | -------------------------------------------------------------------------------- /bin/preBuildNpm.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Do something before 'build-npm' is run 4 | echo '🏎 Runnin build-npm, hang tight!' 5 | -------------------------------------------------------------------------------- /docs/validate-color-logo-github-full-width.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/docs/validate-color-logo-github-full-width.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "validate-color", 3 | "version": "2.2.4", 4 | "private": false, 5 | "description": "Validate HTML colors by 'name', 'special name', 'hex', 'rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'lab' or 'lch' values", 6 | "keywords": [ 7 | "validation", 8 | "color", 9 | "colors", 10 | "colour", 11 | "colours", 12 | "validate color", 13 | "validate colour", 14 | "color validation", 15 | "colour validation", 16 | "HTML color validation", 17 | "HTML colour validation", 18 | "validate HTML color", 19 | "validate HTML colour", 20 | "hex", 21 | "rgb", 22 | "rgba", 23 | "hsl", 24 | "hsla", 25 | "hwb", 26 | "lab", 27 | "lch", 28 | "css" 29 | ], 30 | "homepage": "https://dreamyguy.github.io/validate-color/", 31 | "repository": { 32 | "type": "git", 33 | "url": "https://github.com/dreamyguy/validate-color" 34 | }, 35 | "main": "lib/index.js", 36 | "types": "lib/index.d.ts", 37 | "author": { 38 | "name": "Wallace Sidhrée", 39 | "email": "i@dreamyguy.com", 40 | "url": "http://sidhree.com/" 41 | }, 42 | "copyright": "Copyright (c) Wallace Sidhrée - All rights reserved.", 43 | "license": "MIT", 44 | "devDependencies": { 45 | "@babel/core": "^7.15.8", 46 | "@babel/preset-env": "^7.15.8", 47 | "@babel/preset-react": "^7.14.5", 48 | "babel-loader": "^8.2.3", 49 | "fork-me-on-github": "^1.0.6", 50 | "gh-pages": "^3.2.3", 51 | "node-sass": "^6.0.1", 52 | "react": "^17.0.2", 53 | "react-dom": "^17.0.2", 54 | "react-emojis": "^1.0.6", 55 | "react-scripts": "^4.0.3", 56 | "webpack": "4.44.2", 57 | "webpack-cli": "^4.2.0" 58 | }, 59 | "scripts": { 60 | "start": "react-scripts start", 61 | "prebuild": "echo 🚀 Runnin 'build', hang tight!", 62 | "build": "react-scripts build", 63 | "postbuild": "echo 🎉 'build' was completed", 64 | "prebuild-npm": "./bin/preBuildNpm.sh", 65 | "build-npm": "NODE_ENV=npm webpack --config webpack.config.npm.js", 66 | "postbuild-npm": "./bin/postBuildNpm.sh", 67 | "test": "react-scripts test", 68 | "testTravis": "CI=true react-scripts test", 69 | "eject": "react-scripts eject", 70 | "predeploy": "npm run build", 71 | "deploy": "gh-pages -d build", 72 | "deploy-npm": "npm run build-npm && npm publish", 73 | "release": "npm run deploy && npm run deploy-npm" 74 | }, 75 | "eslintConfig": { 76 | "extends": "react-app" 77 | }, 78 | "browserslist": { 79 | "production": [ 80 | ">0.2%", 81 | "not dead", 82 | "not op_mini all" 83 | ], 84 | "development": [ 85 | "last 1 chrome version", 86 | "last 1 firefox version", 87 | "last 1 safari version" 88 | ] 89 | }, 90 | "dependencies": {} 91 | } 92 | -------------------------------------------------------------------------------- /public/apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /public/apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /public/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /public/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /public/apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /public/apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /public/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Validate Color 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Validate Color", 3 | "name": "Validate Color", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /public/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/mstile-144x144.png -------------------------------------------------------------------------------- /public/validate-color-og-alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/validate-color-og-alt.png -------------------------------------------------------------------------------- /public/validate-color-og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dreamyguy/validate-color/764499956faadab54333cd25f1ddfbc117fcf805/public/validate-color-og.png -------------------------------------------------------------------------------- /src/app/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import ForkMeOnGithub from 'fork-me-on-github'; 3 | import Emoji from 'react-emojis'; 4 | // Import 'validate-color' directly 5 | import validateColor from './../validate-color/index'; 6 | 7 | // Import components 8 | import Input from './components/Input'; 9 | import Footer from './components/Footer'; 10 | 11 | // Import styles 12 | import './App.scss'; 13 | 14 | class App extends Component { 15 | constructor(props){ 16 | super(props) 17 | this.state = { 18 | showMessage: false, // When not set, show Emoji (default) 19 | isValid: false, 20 | inputValue: '' 21 | } 22 | } 23 | 24 | validate(color) { 25 | if (color && color !== '' && validateColor(color)) { 26 | return true; 27 | } 28 | return false; 29 | } 30 | 31 | renderValidStatus() { 32 | const { 33 | showMessage, 34 | inputValue, 35 | isValid, 36 | } = this.state; 37 | return ( 38 |
39 |   40 | {isValid 41 | ? 42 | 43 | {showMessage 44 | ? 45 | `'${inputValue}' is valid!` 46 | : 47 | 48 | } 49 | 50 | : 51 | <> 52 | {inputValue && 53 | 54 | {showMessage 55 | ? 56 | `'${inputValue}' is not a valid color value!` 57 | : 58 | null 59 | } 60 | 61 | } 62 | 63 | } 64 |
65 | ); 66 | } 67 | 68 | render () { 69 | const { 70 | type = 'text', 71 | placeholder = 'Validate color here' 72 | } = this.props; 73 | const { 74 | inputValue, 75 | isValid, 76 | } = this.state; 77 | return ( 78 | <> 79 |
80 | 81 |
82 |
83 |

  validate-color  

84 |

Validate HTML colors by 'name', 'special name', 'hex', 'rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'lab' or 'lch' values

85 |
86 |
87 |
88 | { 96 | this.setState({ 97 | isValid: this.validate(value), 98 | inputValue: value 99 | }) 100 | } 101 | } 102 | /> 103 | {this.renderValidStatus()} 104 |
105 |
106 |