作って学べる
プログラミング講座
アプリを作りながら学習
自分のペースですぐに始められる
困ったら何回でも質問可能
JavaScript

【JavaScript】input type="range"を使った RGB → HEX カラーコード変換ツールの作り方

Sara

今回は JavaScript を使って RGB から HEX にカラーコードを変換するツールの作り方を紹介します。

RGB は (202, 243, 255) のように10進法で数値を表し、HEX は #caf3ff のように16進法で色を表記するものです。

ここでは input type=”range” を使って RGB の値を取得して HEX に変換します。

input タイプの range は細かい数値の設定をするときに便利です。

使う頻度はあまり多くないかもしれませんが、知っておくと役に立つと思いますので、ぜひお試しください。

解説

HTML

まずは HTML を用意します。

HTML ファイルを作成して、以下のコードを追加します。ここでは index.html という名前でファイルを作成しました。

6行目

Google Fonts から「Inconsolata」というフォントを読み込んでいます。

Google Fonts には 900 種類以上のフォントが用意されていて、好きなフォントを簡単に使うことができます。

あわせて読みたい
【JavaScript】input type="range"を使った RGB → HEX カラーコード変換ツールの作り方
【JavaScript】input type="range"を使った RGB → HEX カラーコード変換ツールの作り方

25~27行目

<input type="range" min="0" max="255" value="255" id="r" onchange="changeRange()">

min は range の最小値、max は最大値です。

value には初期値を設定しています。

onchange には「この range の値が変更されたら changeRange 関数を呼ぶ」という設定をしています。

35行目

RGB の初期値(value)を白色 (255, 255, 255) にしているので、HEX で白を表す #ffffff にしています。

CSS

HTML だけだと使いづらいので、CSS でレイアウトを調整します。

9~25行目を追加します。

このようになれば準備完了です。

JavaScript

JavaScript 部分では range が変更されたときに changeRange 関数を呼び出します。

changeRange 関数では

  1. input の値を取得して、int 型に変換
  2. 16進数に変換
  3. HEX 型の色を作成
  4. 背景色とテキストを更新
  5. 文字色の切り替え

を行います。

13~42行目を追加します。

39行目

var hex = num.toString(16);

toString() を使って、数値を10進法から16進法に変更しています。

40行目

if (num < 16) hex = "0" + hex;

HEXでの色の表示は #03060b のようになるので、num が16より小さい場合は、頭に0をつけて桁を揃えています。

30~34行目

ここではテキストの色を変更して文字を見やすくしています。

作成された色が暗い場合は文字色を白に、明るい場合は黒にしています。

完成

うまく動かない場合は、以下のサンプルコードをご確認ください。

サンプルコード

Q
index.html
Subscribe
Notify of
guest
5 Comments
古い順
新しい順 人気順
Inline Feedbacks
View all comments
るる
るる
4 years ago

お世話になります。
カラーピッカーでなく、レンジでRGB変換して色替えするソースコード例がなく、探しておりました。内容は出来ますが、このコードを実装しても、レンジは出力しますが、背景色が変わりません。
何故でしょう?

るる
るる
4 years ago
Reply to  Sara

Saraさん
ご回答有難うございます。
動作しました。仕事の合間で、実装したので一部タイプミスが御座いました。
申し訳御座いません。
このやり方で、TEXTのfont-size,font-weight,letter-spacingもユーザーが変更出来ますね。まずは、ユーザーにPC画面で動作を確認頂き、アプリに落とし込みたいと思っております。TEXTとCOLORを変更して、シリアルLEDを遠隔で操作し、将来は音響でも変換したいと思ってます。コロナが落ち着いたら、エンターテインメント会社とコラボ予定です。
よろしくお願いします。

るる
るる
4 years ago

追記)24px×168pxドット画面を準備して、文字を成形します。

ABOUT ME
Sara
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
主な使用言語:Java / Kotlin / PHP
>> 詳しいプロフィールはこちら
>> 書籍を出版しました!
>> お問い合わせはこちら
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

5
0
この記事にコメントするx
記事URLをコピーしました