php処理でカラーコードをhslaに変換

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. · GitHub

こちらの記事で数式の検証をした程度です

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 日の時点

コメント