@uiw/react-color-name
Version:
Color Name to Hex
98 lines (80 loc) • 10.8 kB
Markdown
<div markdown="1">
<sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup>
<br>
<a target="_blank" href="https://apps.apple.com/app/Vidwall/6747587746" title="Vidwall for macOS"><img align="center" alt="Vidwall" height="52" width="52" src="https://github.com/user-attachments/assets/7b5df70a-ed91-4d4b-85be-f00e60a09ce9"></a>
<a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img align="center" alt="Mousio Hint" height="52" width="52" src="https://github.com/user-attachments/assets/3c0af128-0cef-44e5-a8db-4741dc5a6690"></a>
<a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img align="center" alt="Mousio" height="52" width="52" src="https://github.com/user-attachments/assets/9edf61ff-5a6c-4676-9cc2-8fd3c1ad0dfb"></a>
<a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img align="center" alt="Musicer" height="52" width="52" src="https://github.com/user-attachments/assets/b7abfba8-88ff-4c86-a125-43073d5aef22"></a>
<a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img align="center" alt="Audioer" height="52" width="52" src="https://github.com/user-attachments/assets/7a836865-8c90-4119-87bc-19e06a76c957"></a>
<a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img align="center" alt="FileSentinel" height="52" width="52" src="https://github.com/user-attachments/assets/28bce2cc-290e-45bf-9068-585ff6ecafe9"></a>
<a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img align="center" alt="FocusCursor" height="52" width="52" src="https://github.com/user-attachments/assets/d543668a-737b-4853-a6bb-eaa269e69836"></a>
<a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img align="center" alt="Videoer" height="52" width="52" src="https://github.com/user-attachments/assets/10ffb0f1-0625-40d6-93f1-2c2496592595"></a>
<a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img align="center" alt="KeyClicker" height="52" width="52" src="https://github.com/user-attachments/assets/5a19fcb9-cb81-4855-b4ea-31c604d9612a"></a>
<a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img align="center" alt="DayBar" height="52" width="52" src="https://github.com/user-attachments/assets/771b608d-594c-492d-8532-d9231e383f5b"></a>
<a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img align="center" alt="Iconed" height="52" width="52" src="https://github.com/user-attachments/assets/8a35dc7b-4faf-4e2a-9311-f66d6844a896"></a>
<a target="_blank" href="https://apps.apple.com/app/6737160756" title="RightMenu Master for macOS"><img align="center" alt="RightMenu Master" height="52" width="52" src="https://github.com/user-attachments/assets/39a76541-71bf-4de7-a01c-c62f0557dff5"></a>
<a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img align="center" alt="Quick RSS" height="52" width="52" src="https://github.com/user-attachments/assets/bdaad5b7-9810-44ce-8f17-8410864465d2"></a>
<a target="_blank" href="https://apps.apple.com/app/6670696072" title="Quick RSS for macOS/iOS"><img align="center" alt="Quick RSS" height="52" width="52" src="https://github.com/user-attachments/assets/374106b5-a448-4d1d-9ccb-b04b6bc681ed"></a>
<a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img align="center" alt="Web Serve" height="52" width="52" src="https://github.com/user-attachments/assets/e1d9f76f-0f3d-4ba5-8a15-253ee173bb1c"></a>
<a target="_blank" href="https://apps.apple.com/app/6503953628" title="Copybook Generator for macOS/iOS"><img align="center" alt="Copybook Generator" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/b90e42ff-158b-4534-82ca-5898fd0e8d73"></a>
<a target="_blank" href="https://apps.apple.com/app/6471227008" title="DevTutor for macOS/iOS"><img align="center" alt="DevTutor for SwiftUI" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/f15c154d-0192-48eb-8e0e-9e245ffd974a"></a>
<a target="_blank" href="https://apps.apple.com/app/6479819388" title="RegexMate for macOS/iOS"><img align="center" alt="RegexMate" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/aabe5aa9-9a96-4390-8bed-c3e4023d0dea"></a>
<a target="_blank" href="https://apps.apple.com/app/6479194014" title="Time Passage for macOS/iOS"><img align="center" alt="Time Passage" height="52" width="52" src="https://github.com/jaywcjlove/time-passage/assets/1680273/6f30e429-e6f3-4dbe-9921-a5effe2a05e9"></a>
<a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img align="center" alt="Iconize Folder" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/fa9d8b9c-1e51-4ded-877c-fa5b21c47220"></a>
<a target="_blank" href="https://apps.apple.com/app/6478511402" title="Textsound Saver for macOS/iOS"><img align="center" alt="Textsound Saver" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/0595e842-980b-4574-8891-a8ba853a08be"></a>
<a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img align="center" alt="Create Custom Symbols" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/8cd022ce-a3f1-4e89-b7c6-6fbd0d4db77c"></a>
<a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img align="center" alt="DevHub" height="52" width="52" src="https://github.com/user-attachments/assets/4a44a4fd-67ce-430b-af0a-72f18feaa47d"></a>
<a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img align="center" alt="Resume Revise" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/c9954a20-1905-48de-bdf8-d71837974aa2"></a>
<a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img align="center" alt="Palette Genius" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/27340413-d355-45b2-8f6f-6ac37682d957"></a>
<a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img align="center" alt="Symbol Scribe" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/c7249f05-fa70-4def-a1e9-571d5f171fc9"></a>
</div>
<hr>
React Color Name
===
[](https://jaywcjlove.github.io/#/sponsor)
[](https://bundlephobia.com/package/@uiw/react-color-name) [](https://www.npmjs.com/package/@uiw/react-color-name) [](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-color-name/file/README.md)
Color Name to Hex. [**`@react-color`**](https://uiwjs.github.io/react-color).
## Install
```bash
npm i @uiw/react-color-name
```
## Usage
```js
import colorNameToHex from '@uiw/react-color-name';
colorNameToHex('maroon'); // => #800000
colorNameToHex('navy'); // => #000080
colorNameToHex('olive'); // => #808000
colorNameToHex('purple'); // => #800080
colorNameToHex('red'); // => #ff0000
colorNameToHex('silver'); // => #c0c0c0
colorNameToHex('teal'); // => #008080
colorNameToHex('white'); // => #ffffff
```
## Props
```ts
import named from 'colors-named';
import hex from 'colors-named-hex';
export type ColorKeywords = {
[key in typeof named[number]]: typeof hex[number];
};
/**
* Extended color keywords
* https://www.w3.org/TR/css-color-3/#svg-color
*/
export declare const colorKeywords: ColorKeywords;
export declare const baseNamed: readonly ["aqua", "black", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy", "olive", "purple", "red", "silver", "teal", "white", "yellow"];
export type ColorKeywordsBase = {
[key in typeof baseNamed[number]]: ColorKeywords[key];
};
export declare const colorKeywordsBase: ColorKeywordsBase;
export default function colorNameToHex(name: keyof ColorKeywords): "#F0F8FF" | "#FAEBD7" | "#00FFFF" | "#7FFFD4" | "#F0FFFF" | "#F5F5DC" | "#FFE4C4" | "#000000" | "#FFEBCD" | "#0000FF" | "#8A2BE2" | "#A52A2A" | "#DEB887" | "#5F9EA0" | "#7FFF00" | "#D2691E" | "#FF7F50" | "#6495ED" | "#FFF8DC" | "#DC143C" | "#00008B" | "#008B8B" | "#B8860B" | "#A9A9A9" | "#006400" | "#BDB76B" | "#8B008B" | "#556B2F" | "#FF8C00" | "#9932CC" | "#8B0000" | "#E9967A" | "#8FBC8F" | "#483D8B" | "#2F4F4F" | "#00CED1" | "#9400D3" | "#FF1493" | "#00BFFF" | "#696969" | "#1E90FF" | "#B22222" | "#FFFAF0" | "#228B22" | "#FF00FF" | "#DCDCDC" | "#F8F8FF" | "#FFD700" | "#DAA520" | "#808080" | "#008000" | "#ADFF2F" | "#F0FFF0" | "#FF69B4" | "#CD5C5C" | "#4B0082" | "#FFFFF0" | "#F0E68C" | "#E6E6FA" | "#FFF0F5" | "#7CFC00" | "#FFFACD" | "#ADD8E6" | "#F08080" | "#E0FFFF" | "#FAFAD2" | "#D3D3D3" | "#90EE90" | "#FFB6C1" | "#FFA07A" | "#20B2AA" | "#87CEFA" | "#778899" | "#B0C4DE" | "#FFFFE0" | "#00FF00" | "#32CD32" | "#FAF0E6" | "#800000" | "#66CDAA" | "#0000CD" | "#BA55D3" | "#9370DB" | "#3CB371" | "#7B68EE" | "#00FA9A" | "#48D1CC" | "#C71585" | "#191970" | "#F5FFFA" | "#FFE4E1" | "#FFE4B5" | "#FFDEAD" | "#000080" | "#FDF5E6" | "#808000" | "#6B8E23" | "#FFA500" | "#FF4500" | "#DA70D6" | "#EEE8AA" | "#98FB98" | "#AFEEEE" | "#DB7093" | "#FFEFD5" | "#FFDAB9" | "#CD853F" | "#FFC0CB" | "#DDA0DD" | "#B0E0E6" | "#800080" | "#663399" | "#FF0000" | "#BC8F8F" | "#4169E1" | "#8B4513" | "#FA8072" | "#F4A460" | "#2E8B57" | "#FFF5EE" | "#A0522D" | "#C0C0C0" | "#87CEEB" | "#6A5ACD" | "#708090" | "#FFFAFA" | "#00FF7F" | "#4682B4" | "#D2B48C" | "#008080" | "#D8BFD8" | "#FF6347" | "#40E0D0" | "#EE82EE" | "#F5DEB3" | "#FFFFFF" | "#F5F5F5" | "#FFFF00" | "#9ACD32";
```
<!--footer-dividing-->
## Contributors
As always, thanks to our amazing contributors!
<a href="https://github.com/uiwjs/react-color/graphs/contributors">
<img src="https://uiwjs.github.io/react-color/coverage/CONTRIBUTORS.svg" />
</a>
Made with [contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.