Dear color lovers – together, we’ll have a more colorful future. Support us on

✕

CSS 梯度:
#646996

信息

全部关闭



查找线性和径向色彩过渡的示例。

网页设计简单:复制 CSS 代码,即可轻松集成到网站上。



从 浅色 中找到线性和径向色彩过渡的示例。

网页设计简单:复制 CSS 代码,即可轻松集成到您的网站上。



从 深色 中查找线性和径向色彩过渡的示例。

方便网页设计:复制 CSS 代码,轻松集成到您的网站。

显示选项

说明

明亮的色彩:高色值给人明亮的印象。

RGB 色彩系统中的色彩细分:在这一色调中,在 255 个最大色彩成分中,每个 100 红色 105 绿色和 150 这些颜色的混合比例产生了重叠中间显示的色调。

在插图中,您可以看到颜色是如何由红色(顶部)、绿色(右下角)和蓝色(左下角)三部分组成的。由此产生的颜色可以在中间看到。
100 105 150 R G B
在 CMYK 颜色系统中,颜色的构成如下:在这种色调中,在 100 个最大颜色成分中 33 赛恩 30 品红色 无 黄色和 41 这些颜色的混合比例产生了重叠中间显示的色调。

在插图中,您可以看到颜色是如何由青色(左上角)、洋红色(右上角)、黄色(右下角)和黑色或关键色(左下角)四种成分组成的。由此产生的颜色可以在中间看到。
33% 30% 0% 41% C M Y K

验证您作为制造商的调色板!

为设计师和代理商提供精确的色值。

我们走

线性

HEX #646996 至 HEX #9B9669


CSS 代码:

background-image: linear-gradient(135deg, #646996 6%, #9B9669 94%);

径向

HEX #646996 至 HEX #9B9669


CSS 代码:

background-image: radial-gradient(circle, #646996 14%, #9B9669 95%);

 

HEX #9B9669 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #9B9669 10%, #646996 92%);

 

HEX #9B9669 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #9B9669 3%, #646996 87%);

线性

HEX #646996 至 HEX #647696


CSS 代码:

background-image: linear-gradient(135deg, #646996 12%, #647696 86%);

径向

HEX #646996 至 HEX #647696


CSS 代码:

background-image: radial-gradient(circle, #646996 4%, #647696 88%);

 

HEX #647696 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #647696 12%, #646996 94%);

 

HEX #647696 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #647696 2%, #646996 99%);

 

HEX #646996 至 HEX #6C6496


CSS 代码:

background-image: linear-gradient(135deg, #646996 13%, #6C6496 94%);

 

HEX #646996 至 HEX #6C6496


CSS 代码:

background-image: radial-gradient(circle, #646996 0%, #6C6496 91%);

 

HEX #6C6496 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #6C6496 13%, #646996 88%);

 

HEX #6C6496 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #6C6496 2%, #646996 94%);

 

HEX #646996 至 HEX #7A6496


CSS 代码:

background-image: linear-gradient(135deg, #646996 5%, #7A6496 88%);

 

HEX #646996 至 HEX #7A6496


CSS 代码:

background-image: radial-gradient(circle, #646996 9%, #7A6496 96%);

 

HEX #7A6496 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #7A6496 7%, #646996 90%);

 

HEX #7A6496 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #7A6496 3%, #646996 93%);

线性

HEX #646996 至 HEX #53587D


CSS 代码:

background-image: linear-gradient(135deg, #646996 10%, #53587D 87%);

径向

HEX #646996 至 HEX #53587D


CSS 代码:

background-image: radial-gradient(circle, #646996 12%, #53587D 90%);

 

HEX #53587D 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #53587D 10%, #646996 92%);

 

HEX #53587D 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #53587D 12%, #646996 88%);

 

HEX #646996 至 HEX #7C80A7


CSS 代码:

background-image: linear-gradient(135deg, #646996 12%, #7C80A7 95%);

 

HEX #646996 至 HEX #7C80A7


CSS 代码:

background-image: radial-gradient(circle, #646996 4%, #7C80A7 100%);

 

HEX #7C80A7 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #7C80A7 14%, #646996 95%);

 

HEX #7C80A7 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #7C80A7 6%, #646996 87%);

 

HEX #646996 至 HEX #9498B8


CSS 代码:

background-image: linear-gradient(135deg, #646996 9%, #9498B8 88%);

 

HEX #646996 至 HEX #9498B8


CSS 代码:

background-image: radial-gradient(circle, #646996 7%, #9498B8 92%);

 

HEX #9498B8 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #9498B8 4%, #646996 96%);

 

HEX #9498B8 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #9498B8 10%, #646996 87%);

线性

HEX #646996 至 HEX #647696


CSS 代码:

background-image: linear-gradient(135deg, #646996 6%, #647696 99%);

径向

HEX #646996 至 HEX #647696


CSS 代码:

background-image: radial-gradient(circle, #646996 11%, #647696 99%);

 

HEX #647696 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #647696 0%, #646996 95%);

 

HEX #647696 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #647696 0%, #646996 96%);

 

HEX #646996 至 HEX #6C6496


CSS 代码:

background-image: linear-gradient(135deg, #646996 8%, #6C6496 91%);

 

HEX #646996 至 HEX #6C6496


CSS 代码:

background-image: radial-gradient(circle, #646996 2%, #6C6496 94%);

 

HEX #6C6496 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #6C6496 4%, #646996 89%);

 

HEX #6C6496 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #6C6496 2%, #646996 88%);

 

HEX #646996 至 HEX #7A6496


CSS 代码:

background-image: linear-gradient(135deg, #646996 12%, #7A6496 97%);

 

HEX #646996 至 HEX #7A6496


CSS 代码:

background-image: radial-gradient(circle, #646996 10%, #7A6496 93%);

 

HEX #7A6496 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #7A6496 4%, #646996 97%);

 

HEX #7A6496 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #7A6496 1%, #646996 93%);

线性

HEX #646996 至 HEX #53587D


CSS 代码:

background-image: linear-gradient(135deg, #646996 14%, #53587D 90%);

径向

HEX #646996 至 HEX #53587D


CSS 代码:

background-image: radial-gradient(circle, #646996 7%, #53587D 92%);

 

HEX #53587D 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #53587D 8%, #646996 95%);

 

HEX #53587D 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #53587D 1%, #646996 92%);

 

HEX #646996 至 HEX #7C80A7


CSS 代码:

background-image: linear-gradient(135deg, #646996 12%, #7C80A7 92%);

 

HEX #646996 至 HEX #7C80A7


CSS 代码:

background-image: radial-gradient(circle, #646996 14%, #7C80A7 93%);

 

HEX #7C80A7 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #7C80A7 9%, #646996 88%);

 

HEX #7C80A7 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #7C80A7 14%, #646996 86%);

 

HEX #646996 至 HEX #9498B8


CSS 代码:

background-image: linear-gradient(135deg, #646996 6%, #9498B8 90%);

 

HEX #646996 至 HEX #9498B8


CSS 代码:

background-image: radial-gradient(circle, #646996 11%, #9498B8 92%);

 

HEX #9498B8 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #9498B8 5%, #646996 92%);

 

HEX #9498B8 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #9498B8 11%, #646996 94%);

线性

HEX #646996 至 HEX #966491


CSS 代码:

background-image: linear-gradient(135deg, #646996 0%, #966491 89%);

径向

HEX #646996 至 HEX #966491


CSS 代码:

background-image: radial-gradient(circle, #646996 12%, #966491 98%);

 

HEX #966491 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #966491 14%, #646996 100%);

 

HEX #966491 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #966491 6%, #646996 90%);

 

HEX #646996 至 HEX #7D9664


CSS 代码:

background-image: linear-gradient(135deg, #646996 2%, #7D9664 95%);

 

HEX #646996 至 HEX #7D9664


CSS 代码:

background-image: radial-gradient(circle, #646996 9%, #7D9664 94%);

 

HEX #7D9664 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #7D9664 10%, #646996 95%);

 

HEX #7D9664 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #7D9664 4%, #646996 100%);

线性

HEX #646996 至 HEX #966469


CSS 代码:

background-image: linear-gradient(135deg, #646996 5%, #966469 100%);

径向

HEX #646996 至 HEX #966469


CSS 代码:

background-image: radial-gradient(circle, #646996 0%, #966469 88%);

 

HEX #966469 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #966469 11%, #646996 95%);

 

HEX #966469 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #966469 13%, #646996 99%);

 

HEX #646996 至 HEX #699664


CSS 代码:

background-image: linear-gradient(135deg, #646996 9%, #699664 91%);

 

HEX #646996 至 HEX #699664


CSS 代码:

background-image: radial-gradient(circle, #646996 10%, #699664 93%);

 

HEX #699664 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #699664 5%, #646996 95%);

 

HEX #699664 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #699664 12%, #646996 90%);

线性

HEX #646996 至 HEX #966491


CSS 代码:

background-image: linear-gradient(135deg, #646996 5%, #966491 98%);

径向

HEX #646996 至 HEX #966491


CSS 代码:

background-image: radial-gradient(circle, #646996 7%, #966491 100%);

 

HEX #966491 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #966491 4%, #646996 99%);

 

HEX #966491 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #966491 1%, #646996 86%);

 

HEX #646996 至 HEX #969164


CSS 代码:

background-image: linear-gradient(135deg, #646996 5%, #969164 86%);

 

HEX #646996 至 HEX #969164


CSS 代码:

background-image: radial-gradient(circle, #646996 14%, #969164 99%);

 

HEX #969164 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #969164 0%, #646996 92%);

 

HEX #969164 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #969164 12%, #646996 97%);

 

HEX #646996 至 HEX #649669


CSS 代码:

background-image: linear-gradient(135deg, #646996 4%, #649669 98%);

 

HEX #646996 至 HEX #649669


CSS 代码:

background-image: radial-gradient(circle, #646996 2%, #649669 98%);

 

HEX #649669 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #649669 9%, #646996 94%);

 

HEX #649669 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #649669 7%, #646996 96%);

线性

HEX #646996 至 HEX #966482


CSS 代码:

background-image: linear-gradient(135deg, #646996 6%, #966482 86%);

径向

HEX #646996 至 HEX #966482


CSS 代码:

background-image: radial-gradient(circle, #646996 14%, #966482 88%);

 

HEX #966482 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #966482 3%, #646996 88%);

 

HEX #966482 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #966482 12%, #646996 97%);

 

HEX #646996 至 HEX #969164


CSS 代码:

background-image: linear-gradient(135deg, #646996 2%, #969164 89%);

 

HEX #646996 至 HEX #969164


CSS 代码:

background-image: radial-gradient(circle, #646996 5%, #969164 88%);

 

HEX #969164 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #969164 10%, #646996 97%);

 

HEX #969164 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #969164 3%, #646996 97%);

 

HEX #646996 至 HEX #649678


CSS 代码:

background-image: linear-gradient(135deg, #646996 10%, #649678 96%);

 

HEX #646996 至 HEX #649678


CSS 代码:

background-image: radial-gradient(circle, #646996 12%, #649678 97%);

 

HEX #649678 至 HEX #646996


CSS 代码:

background-image: linear-gradient(135deg, #649678 14%, #646996 100%);

 

HEX #649678 至 HEX #646996


CSS 代码:

background-image: radial-gradient(circle, #649678 7%, #646996 87%);

显示更多调色板

服务

颜色

灰度 于 六角

转换自 RGB 红绿蓝 至 #RRGGBB

灰度 于 CMYK

转换自 RGB 红绿蓝 至 CMYK 青色/洋红/黄色/阶调

Icons

灰度 于 额定功率®

转换自 RGB 红绿蓝 至 RAL® 编号(RAL 0000)

灰度 于 HKS®

转换自 RGB 红绿蓝 至 HKS® 编号 (HKS 00)

灰度 于 泛美®

转换自 RGB 红绿蓝 至 Pantone® 数字(Pantone 0000)

灰度 于 谢尔温-威廉姆斯®

转换自 RGB 红绿蓝 至 Sherwin Williams® 编号 (SW 0000)

灰度 于 NCS®

转换自 RGB 红绿蓝 至 NCS 编号(S0000-X00X)

nsc-logo

RGBA 于 六角

转换自 RGBA 红绿蓝透明度 至 #RRGGBB

RGBA 于 CMYK

转换自 RGBA 红绿蓝透明度 至 CMYK 青色/洋红/黄色/阶调

Icons

RGBA 于 额定功率®

转换自 RGBA 红绿蓝透明度 至 RAL® 编号(RAL 0000)

RGBA 于 HKS®

转换自 RGBA 红绿蓝透明度 至 HKS® 编号 (HKS 00)

RGBA 于 泛美®

转换自 RGBA 红绿蓝透明度 至 Pantone® 数字(Pantone 0000)

RGBA 于 谢尔温-威廉姆斯®

转换自 RGBA 红绿蓝透明度 至 Sherwin Williams® 编号 (SW 0000)

RGBA 于 NCS®

转换自 RGBA 红绿蓝透明度 至 NCS 编号(S0000-X00X)

nsc-logo

CMYK 于 六角

转换自 CMYK 青色/洋红/黄色/阶调 至 #RRGGBB

CMYK 于 灰度

转换自 CMYK 青色/洋红/黄色/阶调 至 RGB 红绿蓝

CMYK 于 RGBA

转换自 CMYK 青色/洋红/黄色/阶调 至 RGBA 红绿蓝透明度

CMYK 于 额定功率®

转换自 CMYK 青色/洋红/黄色/阶调 至 RAL® 编号(RAL 0000)

CMYK 于 HKS®

转换自 CMYK 青色/洋红/黄色/阶调 至 HKS® 编号 (HKS 00)

CMYK 于 泛美®

转换自 CMYK 青色/洋红/黄色/阶调 至 Pantone® 数字(Pantone 0000)

CMYK 于 谢尔温-威廉姆斯®

转换自 CMYK 青色/洋红/黄色/阶调 至 Sherwin Williams® 编号 (SW 0000)

CMYK 于 NCS®

转换自 CMYK 青色/洋红/黄色/阶调 至 NCS 编号(S0000-X00X)

nsc-logo

六角 于 灰度

转换自 #RRGGBB 至 RGB 红绿蓝

六角 于 RGBA

转换自 #RRGGBB 至 RGBA 红绿蓝透明度

六角 于 CMYK

转换自 #RRGGBB 至 CMYK 青色/洋红/黄色/阶调

Icons

六角 于 额定功率®

转换自 #RRGGBB 至 RAL® 编号(RAL 0000)

六角 于 HKS®

转换自 #RRGGBB 至 HKS® 编号 (HKS 00)

六角 于 泛美®

转换自 #RRGGBB 至 Pantone® 数字(Pantone 0000)

六角 于 谢尔温-威廉姆斯®

转换自 #RRGGBB 至 Sherwin Williams® 编号 (SW 0000)

六角 于 NCS®

转换自 #RRGGBB 至 NCS 编号(S0000-X00X)

nsc-logo

额定功率® 于 灰度

转换自 RAL® 编号(RAL 0000) 至 RGB 红绿蓝

额定功率® 于 RGBA

转换自 RAL® 编号(RAL 0000) 至 RGBA 红绿蓝透明度

额定功率® 于 CMYK

转换自 RAL® 编号(RAL 0000) 至 CMYK 青色/洋红/黄色/阶调

Icons

额定功率® 于 六角

转换自 RAL® 编号(RAL 0000) 至 #RRGGBB

额定功率® 于 HKS®

转换自 RAL® 编号(RAL 0000) 至 HKS® 编号 (HKS 00)

额定功率® 于 泛美®

转换自 RAL® 编号(RAL 0000) 至 Pantone® 数字(Pantone 0000)

额定功率® 于 谢尔温-威廉姆斯®

转换自 RAL® 编号(RAL 0000) 至 Sherwin Williams® 编号 (SW 0000)

额定功率® 于 NCS®

转换自 RAL® 编号(RAL 0000) 至 NCS 编号(S0000-X00X)

nsc-logo

HKS® 于 灰度

转换自 HKS® 编号 (HKS 00) 至 RGB 红绿蓝

HKS® 于 RGBA

转换自 HKS® 编号 (HKS 00) 至 RGBA 红绿蓝透明度

HKS® 于 CMYK

转换自 HKS® 编号 (HKS 00) 至 CMYK 青色/洋红/黄色/阶调

Icons

HKS® 于 六角

转换自 HKS® 编号 (HKS 00) 至 #RRGGBB

HKS® 于 额定功率®

转换自 HKS® 编号 (HKS 00) 至 RAL® 编号(RAL 0000)

HKS® 于 泛美®

转换自 HKS® 编号 (HKS 00) 至 Pantone® 数字(Pantone 0000)

HKS® 于 谢尔温-威廉姆斯®

转换自 HKS® 编号 (HKS 00) 至 Sherwin Williams® 编号 (SW 0000)

HKS® 于 NCS®

转换自 HKS® 编号 (HKS 00) 至 NCS 编号(S0000-X00X)

nsc-logo

泛美® 于 灰度

转换自 Pantone® 数字(Pantone 0000) 至 RGB 红绿蓝

泛美® 于 RGBA

转换自 Pantone® 数字(Pantone 0000) 至 RGBA 红绿蓝透明度

泛美® 于 CMYK

转换自 Pantone® 数字(Pantone 0000) 至 CMYK 青色/洋红/黄色/阶调

Icons

泛美® 于 六角

转换自 Pantone® 数字(Pantone 0000) 至 #RRGGBB

泛美® 于 额定功率®

转换自 Pantone® 数字(Pantone 0000) 至 RAL® 编号(RAL 0000)

泛美® 于 HKS®

转换自 Pantone® 数字(Pantone 0000) 至 HKS® 编号 (HKS 00)

泛美® 于 谢尔温-威廉姆斯®

转换自 Pantone® 数字(Pantone 0000) 至 Sherwin Williams® 编号 (SW 0000)

泛美® 于 NCS®

转换自 Pantone® 数字(Pantone 0000) 至 NCS 编号(S0000-X00X)

nsc-logo

谢尔温-威廉姆斯® 于 灰度

转换自 Sherwin Williams® 编号 (SW 0000) 至 RGB 红绿蓝

谢尔温-威廉姆斯® 于 RGBA

转换自 Sherwin Williams® 编号 (SW 0000) 至 RGBA 红绿蓝透明度

谢尔温-威廉姆斯® 于 CMYK

转换自 Sherwin Williams® 编号 (SW 0000) 至 CMYK 青色/洋红/黄色/阶调

Icons

谢尔温-威廉姆斯® 于 六角

转换自 Sherwin Williams® 编号 (SW 0000) 至 #RRGGBB

谢尔温-威廉姆斯® 于 额定功率®

转换自 Sherwin Williams® 编号 (SW 0000) 至 RAL® 编号(RAL 0000)

谢尔温-威廉姆斯® 于 HKS®

转换自 Sherwin Williams® 编号 (SW 0000) 至 HKS® 编号 (HKS 00)

谢尔温-威廉姆斯® 于 泛美®

转换自 Sherwin Williams® 编号 (SW 0000) 至 Pantone® 数字(Pantone 0000)

谢尔温-威廉姆斯® 于 NCS®

转换自 Sherwin Williams® 编号 (SW 0000) 至 NCS 编号(S0000-X00X)

nsc-logo

NCS® 于 灰度

转换自 NCS 编号(S0000-X00X) 至 RGB 红绿蓝

NCS® 于 RGBA

转换自 NCS 编号(S0000-X00X) 至 RGBA 红绿蓝透明度

NCS® 于 CMYK

转换自 NCS 编号(S0000-X00X) 至 CMYK 青色/洋红/黄色/阶调

Icons

NCS® 于 六角

转换自 NCS 编号(S0000-X00X) 至 #RRGGBB

NCS® 于 额定功率®

转换自 NCS 编号(S0000-X00X) 至 RAL® 编号(RAL 0000)

NCS® 于 HKS®

转换自 NCS 编号(S0000-X00X) 至 HKS® 编号 (HKS 00)

NCS® 于 泛美®

转换自 NCS 编号(S0000-X00X) 至 Pantone® 数字(Pantone 0000)

要保存调色板,需要进行注册。

访客可以在颜色收集器中组合并下载颜色。免费激活 qConv Start 后,即可长期保存调色板并管理每个调色板中的颜色。

登录您的账户

或

创建账户

分享当前的调色板
是公开的还是私人的?
分享后会有链接。

取消 分享

共享调色板
请复制并保存所需的链接。

分享

好的,我复制了链接

您的颜色会保存在一个新的调色板中。
在您的个人档案中查看它们。
您可以进一步自定义并共享它们。

显示调色板
关闭

创建调色板

下载以各种格式下载

全部删除

点击 可以创建调色板并下载 色板。

Gastzugang

Gastzugang

访客访问——尚未创建 qConv Start 个人资料 基础功能可在访客额度内使用。 免费创建账户后会激活 qConv Start。之后您可以将调色板和图片长期保存在个人资料中。
保存调色板:需要免费个人资料访客颜色收集器最多可添加 5 种颜色