web前端颜色怎么设置WEB前端工具推荐分享6个热门颜色选择器组件

导读对于前端开发初学者而言，颜色选择器可能比较陌生，甚至在实际项目中都未曾使用过。但如果开发高端一点的网站的话，通常需要自定义主题功能，可以自定义导航栏、菜单栏....

对于前端开发初学者而言，颜色选择器可能比较陌生，甚至在实际项目中都未曾使用过。但如果开发高端一点的网站的话，通常需要自定义主题功能，可以自定义导航栏、菜单栏的文本颜色、背景色之类的，此时就用到颜色选择器了。

今天w3cschool编程狮为大家推荐几个 Github 上热门的颜色选择器组件。

一、Colorjoe

colorjoe 是一个具有触控和 AMD 支持的可扩展颜色选择器。可以通过 CSS 定义其实际尺寸和布局。通过这种方式，该组件非常适合响应式布局。

与那里的许多其他颜色选择器不同，colorjoe 是真正可扩展的。它基于 CSS，不依赖于外部图像。因此，您可以调整其大小以适应您的目的。还支持触控和 AMD 模块定义。

colorjoe 受到 ColorJack 和 RightJS Colorpicker 的启发。与那些不同的是，它实际上可以很好地扩展。从本质上讲，这意味着您将能够使用一些 CSS 定义其实际尺寸和布局。通过这种方式，小部件非常适合响应式布局。

此外，由于它提供的简单 API，实现缺失的功能（RGB 字段等）相对容易。

Colorjoe

安装

npm i colorjoe

如果您更喜欢独立的 dist，请将预打包的dist/colorjoe.js和添加css/colorjoe.css到您的页面或从 src/使用 AMD 。

用法

const joe = colorjoe.rgb(element_id_or_dom_object, initial_color_value, extras);

或者

const joe = colorjoe.Hsl(element_id_or_dom_object, initial_color_value, extras);

二、 Colorful

今天，每个依赖项都会拖累更多的依赖项，并且无法控制地增加项目的包大小。但是大小对于打算在浏览器中工作的所有内容都非常重要。React Colorful 是一个用于 React 和 Preact 应用程序的小型颜色选择器组件，使用 hooks 和函数组件构建。它使用严格的 TypeScript 编写，具有 100% 的测试覆盖率，界面简单易用，适用于大多数浏览器，支持移动设备和触摸屏遵循 WAI-ARIA 指南以支持辅助技术的用户，压缩后仅 2,8 KB（比 react-color 轻小13 倍）。react-colorful 是一个简单的颜色选择器，适合那些关心包大小和客户端性能的人。。

Colorful

安装

npm install React-colorful

Import { HexColorPicker } from "react-colorful";const YourComponent = () => { const [color, setColor] = useState("#aabbcc"); return <HexColorPicker color={color} onChange={setColor} />;};

支持的颜色模型

我们为不同的颜色模型提供了 12 个额外的颜色选择器组件，除非您的应用程序需要 HEX 字符串作为输入/输出格式。

可用的选择器