サイトマップ

カラーコード・RGB値 変換方法

#から始まるカラーコードとRGB値(赤,緑,青)を変換する時の計算方法についてのメモです。

もくじ

  • カラーコードをRGB値に変換
  • RGB値をカラーコードに変換
  • 関連ツール

カラーコードをRGB値に変換

  • ①2文字ずつに分割
  • ②1文字目を十の位、2文字目を一の位とする
  • ③【(十の位x15)+(十の位)+(一の位)】を計算
  • ※A=10、B=11、C=12、D=13、E=14、F=15に置き換える
    • 【(十の位x15)+(十の位)+(一の位)】
    • 【#F2F2F2の場合】
    • →F2 F2 F2
    • →F2のカラーコードのみを計算
    • →【(Fx15)+(F)+(2)】
    • →【(15x15)+(15)+(2)】
    • →242
    • →F2のRGB値は242

RGB値をカラーコードに変換

  • ①【(RGB値)/16+0.00001】を計算
  • ②小数点で分割
  • ③小数点の前の数字→カラーコード1文字目判明
  • ④小数点の後の数字→下記の計算が必要
  • ⑤【(①の小数点以下の数字の先頭に1を加えた数字-100001)/6250】を計算→カラーコード2文字目判明
    • 【(RGB値)/16+0.00001】
    • 16 ………0~Fの数【0123456789abcdef】
    • 0.00001…数字の桁を揃えるために使用
    • [例1] 255/16+0.00001=15.93751…15→F
    • [例2] 240/16+0.00001=15.00001…15→F
    • [例3] __5/16+0.00001= 0.31251…0→0
    • [例4] __0/16+0.00001= 0.00001…0→0
  • 上の計算でカラーコードの1文字目が判明
    • 【(①の小数点以下の数字の先頭に1を加えた数字-100001)/6250】
    • 先頭に1を加える…0から始まる場合の対策
    • [例1続き] (193751-100001)/6250=15…15→F
    • [例2続き] (100001-100001)/6250=0…0→0
    • [例3続き] (131251-100001)/6250=5…5→5
    • [例4続き] (100001-100001)/6250=0…0→0
  • 上の計算でカラーコードの2文字目も判明
    • 0->0 1->1 2->2 3->3 4->4
    • 5->5 6->6 7->7 8->8 9->9
    • 10->A 11->B 12->C
    • 13->D 14->E 15->F

関連ツール

  • カラーコード変換ツール【#xxxxxx⇔R,G,B】
フィードバック
ページトップに戻る
利用規約・免責事項・プライバシーポリシーサイトマップ記事タグ一覧最近更新されたページ
© text.sakura.ne.jp
ページトップに戻る