Cocoon 用スキンの作成に没頭しているのですが、 php 処理で hsla を使いたくなったので作ってみました。
check
- カスタマイズは自己責任でお願いします。
- wp-cocoon.comサイトのサポート対象外となります。
#xxxxxx→RGB→HSLA
colorcode_to_hsla()
// カラーコードを HSLA に変換
if ( !function_exists( 'colorcode_to_hsla' ) ):
function colorcode_to_hsla($colorcode){
$rgb = colorcode_to_rgb($colorcode);
$r = $rgb['red'] / 255;
$g = $rgb['green'] / 255;
$b = $rgb['blue'] / 255;
$max = max( $r, $g, $b );
$min = min( $r, $g, $b );
$h;
$s;
$l = ( $max + $min ) / 2;
$d = $max - $min;
if( $d == 0 ){
$h = $s = 0;
} else {
$s = $d / ( 1 - abs( 2 * $l - 1 ) );
switch( $max ){
case $r:
$h = 60 * fmod( ( ( $g - $b ) / $d ), 6 );
if ($b > $g) {
$h += 360;
}
break;
case $g:
$h = 60 * ( ( $b - $r ) / $d + 2 );
break;
case $b:
$h = 60 * ( ( $r - $g ) / $d + 4 );
break;
}
}
$hsla['h'] = round( $h, 0 );
$hsla['s'] = round( $s, 2 );
$hsla['l'] = round( $l, 2 );
$hsla['a'] = 1.0;
return $hsla;
}
endif;
Cocoon には /lib/utils.php に colorcode_to_rgb() が用意されていますので、 こちらを利用してまずは RGB に変換します。
あとはこちらの記事からコードを頂いて、

PHP snippet to convert RGB to HSL and HSL to RGB.
PHP snippet to convert RGB to HSL and HSL to RGB. GitHub Gist: instantly share code, notes, and snippets.
こちらの記事で数式の検証をした程度です w
HSLA の変調 (パラメータ変更)
hsla_modulation()
//HSLA を変調
if ( !function_exists( 'hsla_modulation' ) ):
function hsla_modulation(
$hsla,
$hue = 0,
$saturation = 1.0,
$lightness = 1.0,
$opacity = 1.0)
{
$hsla['h'] += $hue;
$s = (mb_substr($saturation, -1) == '%')
? mb_substr($saturation, 0, -1) / 100
: $hsla['s'] * $saturation;
//$s == 0 の時、 何故か '%' が付加されない
if ($s == 0) $s = 0.0001;
$hsla['s'] = $s;
$l = (mb_substr($lightness, -1) == '%')
? mb_substr($lightness, 0, -1) / 100
: $hsla['l'] * $lightness;
$hsla['l'] = $l;
$a = (mb_substr($opacity, -1) == '%')
? mb_substr($opacity, 0, -1) / 100
: $hsla['a'] * $opacity;
$hsla['a'] = $a;
return $hsla;
}
endif;
HSLA のパラメータ変更を行います。
第1引数の $hsla は、 上述 colorcode_to_hsla() にて変換された、 パラメータ変更対象となる hsla を渡します。
第2引数の $hue は位相する度数を渡します。
第3〜5引数は 「%」 付きの場合はその数値に変更し、 「%」 なしの場合は元の数値の乗算になります。
要注意
また、 $hsla['s'] == 0 の時、 出力される css に何故か 「%」 が付加されないため、 強制的に 「0.01 (0.0001×100)」 に変更します。
大勢に影響ないとは思いますが、 厳密なパラメータ変更ではないのでご注意ください。
HSLA を CSS コードに変換
hsla_to_css_code()
//HSLA を CSS コードに変換
if ( !function_exists( 'hsla_to_css_code' ) ):
function hsla_to_css_code($hsla, $lightness = 1.0, $opacity = 1.0){
$hsla = hsla_modulation($hsla, 0, 1.0, $lightness, $opacity);
$h = $hsla['h'];
$s = $hsla['s'] * 100;
$l = $hsla['l'] * 100;
$a = $hsla['a'];
return 'hsla('.$h.', '.$s.'%, '.$l.'%, '.$a.')';
}
endif;
HSLA を css コードに変換します。
変換する際に輝度や不透明度のみ変更したいケースが (当サイトの場合は) 多いので、 引数簡略化のため、 その二者のみ変更可能としてあります。
使用方法
<?php
if (get_site_key_color()){// キーカラー
$thx_key = get_site_key_color();
} else {
$thx_key = '#808080';
}
$thx_key_hsla = colorcode_to_hsla($thx_key);
$thx_key_080 = hsla_to_css_code($thx_key_hsla,'80%');
$thx_key_060 = hsla_to_css_code($thx_key_hsla,'60%');
.article h3 {
background: linear-gradient(90deg, <?php echo $thx_key_080; ?>, #fff);
}
.article h4,
.article h5,
.article h6 {
border-color: <?php echo $thx_key_060; ?>;
}
?>
この様な記述で、 当サイトは色指定をしております。 (2019 年 2 月 17 日の時点)
コメント