转换为 3 位十六进制颜色代码

Posted 2023-02-23

【中文标题】转换为 3 位十六进制颜色代码

【英文标题】：convert to 3-digit hex color code

【发布时间】：2010-11-30 08:45:00

【问题描述】：

长期以来，我一直在 CSS 中使用 3 位十六进制颜色值：#fff、#999、#069 等。我可以看到重复的字母/数字如何合并以创建 3 -digit 十六进制颜色代码，但我不完全理解能够在 php 中编写转换器的模式。有这方面的文档吗？

编辑：哦，也许我的问题不清楚。我需要知道一些 6 位十六进制颜色值是如何转换为 3 位的。 xxxxxx (ffffff) 和 xxyyzz (006699) – 这是仅有的两种模式，对吗？

【问题讨论】：

您以哪种方式看待转换？从 3 位到 6 位？还是从十六进制到十进制？

转换器的好处肯定是非常有限的。毕竟，只能简化一小部分颜色代码，而每个代码仅节省 3 个字符。如果有任何文档，我会感到惊讶，但作为编程练习，它可能很有用。

哦，也许我的问题不清楚。我需要知道一些 6 位十六进制颜色值是如何转换为 3 位的？ xxxxxx (ffffff) xxyyzz (006699)，只有这两种模式，对吗？

【参考方案1】：

3位CSS代码是6位的缩写”：#06a;是#0066aa; 每两个数字代表一个从 0 到 255 的数字。 只需将这些值转换为十六进制并返回即可。

【参考方案2】：

要将 3 个字符的十六进制代码转换为 6 个字符的代码，您需要重复每个字符：

$hex = '#fff';
$hex6 = '#' . $hex[1] . $hex[1] . $hex[2] . $hex[2] . $hex[3] . $hex[3];

如果要将其转换为十进制，可以使用hexdec 函数

【参考方案3】：

#f0f 扩展为#ff00ff 所以基本上你只需要计算每个字符的值和值乘以 16，例如：

#f98: f = 15 => 红色 = 15 + 15*16 = 255 等等

【讨论】：

啊，我似乎没有抓住重点 - 以及我对 API 咨询的感觉 (hexdec())。

那么，使用这个逻辑，你可以通过除以 16 来反转它以获得十六进制 3 版本？

@Josh 好吧，是的。但您会有效地将自己的粒度限制为每个频道 16 个而不是 256 个。

【参考方案4】：

function hexfix(str) 
  var v, w;
  v = parseInt(str, 16);	// in rrggbb
  if (str.length == 3) 
    // nybble colors - fix to hex colors
	//  0x00000rgb              -> 0x000r0g0b
	//  0x000r0g0b | 0x00r0g0b0 -> 0x00rrggbb
	w = ((v & 0xF00) << 8) | ((v & 0x0F0) << 4) | (v & 0x00F);
	v = w | (w << 4);
  
  return v.toString(16).toUpperCase();
 

var hex1 = 'AABBCC',
    hex2 = 'ABC';

document.body.appendChild(document.createTextNode(hex1+" becomes "+hexfix(hex1)+'.  '));
document.body.appendChild(document.createTextNode(hex2+" becomes "+hexfix(hex2)+'.  '));

类似的东西。