首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用于将十六进制转换为HSL (而不是HSL到十六进制)的PHP函数

在云计算领域,PHP是一种常用的编程语言,用于开发Web应用程序。PHP提供了丰富的函数库,包括用于处理颜色的函数。下面是一个用于将十六进制转换为HSL的PHP函数的示例:

代码语言:txt
复制
function hexToHsl($hex) {
    // 将十六进制颜色值转换为RGB值
    $r = hexdec(substr($hex, 0, 2)) / 255;
    $g = hexdec(substr($hex, 2, 2)) / 255;
    $b = hexdec(substr($hex, 4, 2)) / 255;

    // 计算RGB值对应的最大值和最小值
    $max = max($r, $g, $b);
    $min = min($r, $g, $b);

    // 计算亮度(Lightness)
    $l = ($max + $min) / 2;

    // 计算饱和度(Saturation)
    if ($max == $min) {
        $s = 0;
    } else {
        $d = $max - $min;
        $s = $l > 0.5 ? $d / (2 - $max - $min) : $d / ($max + $min);
    }

    // 计算色相(Hue)
    switch ($max) {
        case $r:
            $h = ($g - $b) / $d + ($g < $b ? 6 : 0);
            break;
        case $g:
            $h = ($b - $r) / $d + 2;
            break;
        case $b:
            $h = ($r - $g) / $d + 4;
            break;
    }
    $h /= 6;

    // 将HSL值转换为百分比形式
    $h = round($h * 360);
    $s = round($s * 100);
    $l = round($l * 100);

    // 返回HSL值
    return "HSL($h, $s%, $l%)";
}

这个函数接受一个十六进制颜色值作为参数,并返回对应的HSL值。函数首先将十六进制颜色值转换为RGB值,然后根据RGB值计算HSL值的各个分量(色相、饱和度、亮度)。最后,将HSL值转换为百分比形式,并返回结果。

这个函数可以在各种需要将十六进制颜色值转换为HSL值的场景中使用,例如图像处理、数据可视化等。如果你在腾讯云上进行开发,可以使用腾讯云的云服务器(CVM)来运行PHP代码,腾讯云的云数据库(TencentDB)来存储数据,腾讯云的云函数(SCF)来实现无服务器计算,腾讯云的云存储(COS)来存储文件等。具体的产品介绍和链接如下:

  • 腾讯云云服务器(CVM):提供可扩展的云服务器实例,支持多种操作系统和应用场景。产品介绍链接
  • 腾讯云云数据库(TencentDB):提供高性能、可扩展的数据库服务,支持多种数据库引擎。产品介绍链接
  • 腾讯云云函数(SCF):提供无服务器计算服务,可以按需运行代码,无需管理服务器。产品介绍链接
  • 腾讯云云存储(COS):提供安全可靠的对象存储服务,适用于存储和处理各种类型的文件。产品介绍链接

通过使用这些腾讯云的产品,你可以在云计算领域更加高效地开发和部署应用程序。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

这十个互联网巨头网站配色数据拿去!

▍如何对颜色数据进行统一换 为了数据整理以便于绘制上面这张扇形图,我需要将所有的颜色代码转换为同一种格式。 下面再来说说我是怎样把这些不同颜色代码统一换为HSL这种格式。...十六进制颜色码 这是网络上最常见颜色代码格式了。十六进制颜色码数字底数是16不是10,因此它每个字符表示015间一个数,不是09之间数。...如果十六进制颜色码转换为RGB,那么#BADA55这个颜色实际指的是:红色: 186;绿色: 218; 蓝色: 85。 3位十六进制色彩 有时候你会看到3位十六进制颜色码比如:#000。...这里以RGB为例,怎样才能将RGB代码转化为HSL呢? 第一步是是所有的红、绿和蓝数值转换为01之间十进制数。 然后你就能确定"min"和"max"。...具体过程是:这个值乘上42.6,然后加上255 。 这里,就基本大功告成了。 HSL颜色码非常接近人类理解色彩模式,因此它是用来组织和分析最有用模型。

1K00

现代 CSS 颜色指南

十六进制使用 16 个符号表示,使用 0 - 9 表示值 0 9,A - F 表示值 10 15,如下: 在 CSS 中,使用 6 个十六进制数字来表示颜色。...在十六进制代码中,另外两位数字添加到六位数字序列中,形成一个八位数字序列。例如,要在十六进制代码中设置黑色#000000,要添加 50% 透明度,可以将其更改为#00000080。...HSL颜色函数表示形式如下: hsl(Hue, Saturation, Lightness) 其中Hue是色调值,即在色轮上位置,可以是 0360deg之间任何值,该参数还可以接 角度单位 turn...超亮白色可以使用高达 400% 百分比。a和b轴值可以是正值或者负值。两个负值导致颜色朝向光谱绿色/蓝色端,两个正值可以产生更橙色/红色色调。...它与 Lab 具有相同 L 值,但不是使用坐标 a* 和 b*,而是使用 C(色度)和 H(色调)。色调可以是 0 360 之间值。色度代表颜色量,它类似于 HSL饱和度。

2.5K20
  • css样式中颜色格式

    三组也是代表着 red,green,blue,和 RGB 一样是,它也可以指定透明度,也就是说我们可以使用 8 位十六进制来表示颜色。...在 HSL 中,我们色调是在 0deg-360deg 之间,一圈大致颜色范围就是红橙黄绿青蓝紫,饱和度是在 0-100%之间,亮度是在 0%-100%之间。...“色度”或多或少是“饱和度”同义词。它在概念上与 HSL 非常相似,但有两个很大区别: 如前所述,它优先考虑人类感知,因此具有相同“亮度”值两种颜色感觉同样轻。...它不绑定到任何特定颜色空间。 与我们看到其他颜色格式不同,LCH 不受 sRGB 约束。它甚至没有绑定 P3!它通过对色度没有上限来实现这一点。...在 HSL 中,饱和度范围从 0%(无饱和) 100%(完全饱和)。这是可能,因为我们知道我们正在谈论 sRGB 色彩空间,一个有限调色板。

    2.2K30

    前端测试题:(解析)红色RGB代码是?

    考核内容: css颜色代码 题发散度: ★ 试题难度: ★ 解题: CSS 颜色使用组合了红绿蓝颜色值 (RGB) 十六进制 (hex) 表示法进行定义。...对光源进行设置最低值可以是 0(十六进制 00)。最高值是 255(十六进制 FF)。 十六进制值使用三个双位数来编写,并以 # 符号开头。 ?...红色表示可以是 body{color:#ff0000} // 也可以是以下写法 body{color:rgb(255,0,0)} 还有一种颜色表示方法: HSL 颜色 HSL 指的是 hue(...HSL 颜色值是这样规定hsl(hue, saturation, lightness)。...Hue 是色盘上度数(从 0 360) - 0 (或 360) 是红色,120 是绿色,240 是蓝色。Saturation 是百分比值;0% 意味着灰色, 100% 是全彩。

    1.4K20

    CSS3颜色特性

    随着互联网迅速发展,一个网页给人们留下第一印象,既不是内容,也不是设计, 而是整体颜色。...而在Web页面的设计中, 颜色主要运用16 进制数值表示方法, 为了用HTML表现RGB颜色, 使用十六进制数 0 ~ 255, 改为十六进制就是 00 ~ FF, 用RGB顺序罗列就成为HTML颜色编码...RGB、CMYK等颜色模式都不可以直接转换为双色调模式,必须将色彩模式先转换为灰度模式后, 才能够转换为双色调 模式。 用双色调模式可以用很小空间制作出漂亮图片。...6.位图模式,位图模式是用白色和黑色共同处理图片模式。与双色调一样,除双色调模式和灰度模式外,其他色彩模式都需要转换为灰度模式后,再转换为位图模式。...同时可以使用不同亮度( L)来控制这个颜色,其中0表示是一个灰度,不使用任何 色彩,100%是指在充分使用一个颜色。

    1.1K30

    写给前端工程师色彩常识:色彩三属性及其在CSS中应用

    注:不论任何颜色,只要明度降到最低都会变成黑色,不同“无彩色”之间只有明度上差异。...在 css3 中引入了一个表示色彩新方法,例如 hsl(45,75%,50%),类似我们今天讲色彩三要素,HSL颜色写法在现代浏览器中完全支持,你完全不用担心,以前我们常用十六进制表示方法 background-color...:#21439c,或 rgb(10%,10%,50%) 这两种方法,今天关于 HSL 这种新写法以还是值得你关注: 从十六进制颜色转换成 RGB 颜色很容易,但是转换成 HSL不是这么容易 HSL...在 CSS 实际场景中运用 既然在 CSS3 中我们能够运用类似 hsl(45,75%,50%) 这种方式来表示色彩三要素,但是我们为什么要使用这方式,不用我们习惯RGB写法或十六进制写法表示颜色呢...小节 今天内容就分享这里,希望你能喜欢此文章内容,关于颜色这三属性我做下简单总结,色相指的是“红色”等颜色,饱和度指的是颜色饱和程度,明度是颜色明亮程度。

    1.5K40

    给你应用建立一套配色方案

    此 GUI 挑战基本brand color为 #0af . 首先,对于这个颜色系统,十六进制值需要转换为hsl。...brand 从brand颜色开始,通过--brand-hue,--brand-saturation和--brand-lightness自定义属性包装在 hsl()函数括号内进行重建,无需任何计算: *...Tips: 大多数用户无法告诉您它不是黑色,但他们会注意它以某种方式感觉和谐。秘诀是黑色和白色专门用于最亮高光和最暗阴影。...surface 颜色 surface颜色是文本所在背景、边框和其他装饰表面。在浅色主题中,这些是浅色,不是深色文本颜色。要使用 hsl 创建浅色,我们将在第三个亮度值中使用更高百分比值。...这样,使用设计变量的人永远不必担心当前设置是哪种配色方案,他们只需要使用表面和文本颜色。不是color: var(--text1-light)使用color: var(--text1).

    1.7K40

    换肤功能(scss、css变量)

    这里就用到 css 变量函数了:==var()== 之前有谈到使用 css 变量以及赋值方法:Bilibili [冬] banner 早中晚切换效果 var() 函数用于插入自定义属性值 两个参数...var() 函数变量值== 获取衍生色 主题色是只有一个,需要通过主题色来获取其衍生颜色(高亮、浅色等) scss 中提供一个方法:==mix()== Mix 函数两种颜色根据一定比例混合在一起...它是每个 RGB 百分比来衡量,当然透明度也会有一定权重 如果指定比例是 25%,意味着==第一个颜色==所占比例为 25%,第二个颜色所占比例为75% 此外,scss 还有一个 HSL 函数,也是设置颜色值方法...-2, $weight: 50%) must be a color mix 函数无法使用带有 var() 函数变量参数,HSL 函数也是;但普通变量是可以 最终只能使用 js 函数通过主题色来获取衍生颜色...^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/ let sColor = str.toLowerCase() n = n || 1 // 十六进制颜色转换为RGB格式

    4.4K20

    如何提取图片中某个位置颜色RGB值,RGB十进制值与十六进制转换

    【内容拓展一】:RGB 十进制值与十六进制转换 当我们从 RGB 十进制值转换为十六进制值时,我们需要将每个颜色通道十进制值转换为两位十六进制值。每个颜色通道范围是 0 255 。...转换为十六进制 2.1 红色通道(125) 首先,我们 125 转换为十六进制。 125 除以 16 得到商为 7 ,余数为 13 (即十六进制 D )。 所以,红色通道十六进制值为 7D 。...2.2 绿色通道(200) 200 转换为十六进制。 200 除以 16 得到商为 12 ,余数为 8 (即十六进制 8 )。 所以,绿色通道十六进制值为 C8 。...2.3 蓝色通道(50) 50 转换为十六进制。 50 除以 16 得到商为 3 ,余数为 2 (即十六进制 2 )。 所以,蓝色通道十六进制值为 32 。 3....色彩模型 RGB 是一种色彩模型,用于表示颜色。除了 RGB 外,还有其他色彩模型,如 HSL (色相、饱和度、亮度)、 HSV (色相、饱和度、明度)等。每种色彩模型都有其独特特点和应用场景。

    2K00

    【CSS进阶】CSS 颜色体系详解

    这里这个测试 test3 是为了说明,当传入色彩关键字错误,CSS 属性无效不是使用当前currentColor 替代。 currentColor会在下文说明。...值得注意是: 在 CSS3 之前,transparent 关键字不是一个真实颜色,只能用于 background-color 和 border-color中,表示一个透明颜色。...transparent 用于 border,实现增大点击热区 按钮是我们网页设计中十分重要一环,按钮设计也与用户体验息息相关。...像这样: 嗯哼,这里我们 border 用于了扩大鼠标点击区域,然而真实情况是有的时候我们按钮必须要用到 border, border 又只能设置一重(无法像 box-shadow和 渐变一样设置多重...这里举个简单例子,利用透明渐变,实现一个切角图形: 通过 线性渐变 linear-gradient 实现从透明色实色变化,四个四分之一大小( background-size: 50% 50%)图形组合在一起

    1.7K61

    深入了解CSS颜色架构:提升你网页设计技巧

    当我们需要创建同一色调不同深浅时,使用这种表示方式会变得比较困难。 在处理这个问题时,作者选择HEX/RGB颜色转换为HSL颜色,然后尝试找出每一组颜色典型色调。...从 HEX/RGB 转换为 HSL 如果我们信息(蓝色)颜色转换为HSL颜色,我们可以看到所有色调(第一个值)都不同;它们范围在 188 和 192 之间。...例如: background-color: hsl( var(--color-info-100) ); 作者并未将hsl()函数直接加入变量中,这是因为他希望在需要时候能够方便地控制颜色透明度。...HSL函数语法如下: hsl(hue, saturation, lightness) 色相(Hue)是一个0360之间角度值,表示颜色在色轮上位置。...HSL函数在CSS中常用于定义背景颜色、文本颜色和边框颜色等属性。它提供了一种更直观和灵活方式来表示颜色,使得调整和控制颜色更加方便。

    30010

    css颜色介绍和背景设置

    举例: rgb(255,0,0,0)//完全透明,没有颜色红色 rgb(0,0,0,0.5)//半透明黑色 rgb(255,255,255,1)//完全不透明白色 3.HSLhsl(hue...举例: hsla(0, 100%, 50%,0 )//完全透明,没有颜色红色 hsla(0, 100%, 50%,1)//红色 5.HEX:hex是使用十六进制值来指定颜色,格式为:#rrggbb...,rr(红色),gg(绿色),bb(蓝色)是介于00-ff之间十六进制值。...举例: #ff0000 红色 #ffff00 黄色 #ffffff 白色,也可以两个相同值合并,如#fff白色 #000黑色 6.颜色名称:tomato,orange, gray 如何设置背景颜色...;(100% 100%)right bottom设置右下角;(0 100%)left bottom设置左下角;0 0(left top)设置左上角;center center 水平和垂直方向都居中

    1.8K40

    IP库新增多种颜色转换空间IP

    从 RGB 转换为 HSL 以及从 HSL换为 RGB 时,通过增加 HSL 颜色空间饱和度,RGB 颜色变得更强。 RGB HSL 色相、饱和度和强度元素控制更宽颜色范围以实现图像增强。...颜色增益应用于 HSL 后,HSL 颜色空间转换回 RGB 颜色空间。在此过程中,对每个 HSL 元素应用乘法增益(权重)控制后,生成增强图像颜色看起来自然且更明亮。...iRGB端口由具有有效信号红、绿、蓝颜色分量组成,用于RGB像素转换为HSL像素。 RGB通道转换到HSL色彩空间仿真结果如下图所示。...HSL RGB 视频颜色处理模块中实现HSL-RGB颜色空间采用HSLRGB转换算法,并采用标准Xilinx AXI4流接口进行设计,因此可以作为模块插入任何图像处理管道中。...HSL RGB 模块输入 HSL换为 RGB 颜色空间。该模块具有时钟和复位端口。iRGB端口由具有有效信号红、绿、蓝RGB通道组成,用于RGB像素转换为HSL像素。

    38030

    网页色彩死抠指南

    随后他又进一步尝试分离蓝光,蓝光不再可分,证明颜色并不在棱镜内,而是棱镜光线分离了。这说明,在增色混合(显示器上颜色混合类型)中,红、绿、蓝一起能产生所有颜色。这种情况下,红和绿生成黄。 ?...一个字节代表00FF(十六进制表示法)之间一个数,或者是0255(十进制表示法)之间一个数。第一个字节是红色,第二个是绿色,第三个是蓝色。称作十六进制是因为它使用了基数16计数系统。...HSL 数值方式 Hsl 数值和 rgb 有类似的语义和取值范围,但它使用色相、饱和度、亮度值来表示颜色,不像显示器解析颜色那样。语法结构上,这挺像 rgb 数值;但取值范围不同。...Hsl 是基于孟塞尔颜色系统(孟塞尔最先利用贴近人类实际视觉数学原理,颜色分离成这三个分量,创造了一个描述颜色三维系统)。 ? 色调、饱和度、亮度可以用一个三个维度模型表示。...currentColor currentColor 是个非常有用值。它识别层叠,可用在一种颜色延展另一个对象时,如盒模型阴影、轮廓线、边框,甚至背景。

    1.6K40

    一条命令生成属于自己工具站(json格式化、编码转换、UUID生成等)

    一条命令生成属于自己工具站(json格式化、编码转换、UUID生成等)1 it-tools简介适用于开发人员和 IT 人员有用工具,很多开发人员或者IT人员会收藏一些工具库网站,建议看下这个开源工具...、数字和/或符号随机字符串。...使用您需要函数对文本字符串进行哈希处理:MD5、SHA1、SHA256、SHA224、SHA512、SHA384、SHA3 或 RIPEMD160使用 bcrypt 对文本字符串进行哈希处理和比较。...Bcrypt是基于河豚密码密码散列函数。...日期和时间转换为各种不同格式在不同基数之间转换数字(十进制、十六进制、二进制、八进制、基数64等)在不同格式(十六进制,rgb,hsl和css名称)之间转换颜色解析 JSON 并将其转换为 TOML

    10410

    图像处理基础:颜色空间及其OpenCV实现

    但是,我只写一些常见(RGB、HSV和HSL)。...在更专业术语中,RGB颜色描述为由三个部分组成元组。每个部分都可以取0255之间值,其中元组(0,0,0)表示黑色,元组(255,255,255)表示白色。...饱和度是指颜色多少,明度是指颜色有多暗或多亮。正如你所看到,圆柱体顶部全是白色,底部全是黑色。 ?...图2:HSL颜色空间 HSL颜色空间Python实现: 使用OpenCV函数**cvtColor()**BGR颜色空间转换为HSL颜色空间,在这里我们需要传递图像,以及从哪个颜色空间哪个颜色空间我们想要改变图像...通过改变这些参数,我们可以生成不同颜色。 ? 图3:HSV颜色空间 HSV颜色空间Python实现: 使用cvtColor()函数色彩空间转换为HSV色彩空间。

    1.5K10

    理解了 HSL 颜色表示法,就能实现 ColorPicker 组件

    颜色有很多种表示法,RGB 是最常用,分别是 red、green、blue,还可以用十六进制标识法 #FFFFFF R、G、B 取值范围是 0 255。...0.3 turn 就是一圈 0.3 地方颜色, 150 deg 就是 150 度地方颜色。 有 RGB 不就好了么?为啥还要搞个 HSL?...此外,还有 HSV/HSB,这俩用明度不是亮度,都是差不多东西: 所以说,HSL 对人很友好,调解下明暗度、色彩饱和度等很直观。在网页里支持 RGB 和 HSL 这俩表示法。...所以颜色选择器一般都是 HSL ,调节色相、饱和度、亮度这三者,不是直接调节 RGB。 最后显示时候才转成 RGB。...(HSV/HSB 和 HSL 是一样东西,只不过叫明度不是亮度) ColorPicker 一般都是用 HSL 来实现,通过滑块调节色相、饱和度、亮度,显示时候加上几个渐变,就能实现这种组件:

    43420

    sass基本运算

    如果两个都是带单位数字,则Sass会报错编译不通过; (4)在Sass除法中,由于“/”在CSS中已经作为一种符号来使用了,所以我们需要在外面添加一个“小括号()”; 在实际开发中,不管是加法、减法...颜色运算支持加、减、乘、除,并且是分段进行计算。也就是说,红、绿、蓝这3个部分颜色是单独进行计算。...此外,如果颜色值不是十六进制颜色值(如#010203),而是RGB或者HSL的话,我们都是RGB或HSL先转换为十六进制颜色值,然后再进行加、减、乘、除运算。...,我们经常会碰到好些不同地方都用到相同CSS样式情况。...CSS继承性,指的是子元素继承了父元素某些样式属性,例如在父元素中定义字体颜色(color),子元素会继承父元素字体颜色。对于CSS这些,之后再说。

    47310
    领券