はじめに

この記事では、カラーコードとパーセンテージを引数に与えることで渡した色を薄くしたカラーを返却してくれる関数をご紹介します。

マスターのカラーを基準として類似の色をフロントエンドで生成する際などに便利な関数となります。

結論

関数は以下になります。

constlightenHexColor = (hex, percentage) => {
  let [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16) * (1 - percentage));
  r = Math.round(r).toString(16).padStart(2, '0');
  g = Math.round(g).toString(16).padStart(2, '0');
  b = Math.round(b).toString(16).padStart(2, '0');
  return `#${r}${g}${b}`;
}

使用例

let originalHexColor = '#FF0000';
let lightenedHexColor = lightenHexColor(originalHexColor, 0.1);
console.log(lightenedHexColor); // "#E60000"

ついでにhex(16進数)ではなくRGBで使用する場合もご紹介します

hex(16進数)ではなくRGBで使用する場合

const lightenColor = (rgb, percentage) => {
  let [r, g, b] = rgb.match(/\d+/g).map(x => x * percentage);
  return `rgb(${r}, ${g}, ${b})`;
}

使用例

let originalColor = 'rgb(255, 0, 0)';
let lightenedColor = lightenColor(originalColor, 0.9);
console.log(lightenedColor); // "rgb(229, 0, 0)"

注意点等

保存した色などの類似色を作りたくて、かつ法則性のある色で良い場合は、バックエンドでそれぞれの色も保存するのではなく、フロントエンドで随時生成してあげるといった方法を取ることで、バックエンドのデータ構造をシンプルに保つことが可能になります。

クロスプラットフォームでの開発の場合はよいですが、コードが分かれている場合等はフロントエンドでなんでも済ませてしまうと後で辛くなってしまう場合もありますので、開発対象の要件によって検討し使い分けが必要となります。

クロスプラットフォーム開発のメリット

1. 効率的な開発： 一つのコードベースを使用して複数のプラットフォームに対応することで、開発効率が向上します。
2. 広いターゲットマーケット： クロスプラットフォーム開発を行うことで、多くのデバイスを対象にアプリケーションを配信することができます。
3. 投資の最適化： 一つのコードベースを使用することで、投資の最適化が図れます。
4. 統一されたユーザーエクスペリエンス： クロスプラットフォーム開発を行うことで、ユーザーエクスペリエンスを統一することができます。
5. メンテナンスの簡素化： 一つのコードベースを使用することで、メンテナンス作業を簡素化することができます。

クロスプラットフォーム開発のデメリット

1. 機能の制限： 一つのコードベースを使用するため、特定のプラットフォームに固有の機能を利用することができない場合があります。
2. パフォーマンスの劣化： 一つのコードベースを使用するため、特定のプラットフォーム上でのパフォーマンスが劣化する場合があります。
3. 複雑なテスト： クロスプラットフォーム対応を行うため、テスト作業が複雑になる場合があります。
4. UIの調整： クロスプラットフォーム対応を行うため、ユーザーインターフェイス（UI）を調整する必要がある場合があります。
5. コードの複雑化： 一つのコードベースを使用するため、コードが複雑になる場合があります。

さいごに

この記事ではカラーコードとパーセンテージを引数に与えることで渡した色を薄くしたカラーを返却してくれる関数の作成方法についてご紹介しました。

最後まで閲覧いただきありがとうございました。

オススメ記事
サービス導入、業務効率化等…システム開発会社ができることをわかりやすく解説
サイトカラーをCSSで定義する際の命名規則について