Преобразование HSL в RGB на JavaScript

JavaScriptJavaScriptBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом лабе мы углубимся в мир программирования на JavaScript и узнаем о преобразовании HSL в RGB. Вас познакомят с формулой преобразования HSL в RGB и о том, как ее использовать для преобразования кортежей цветов HSL в формат RGB. В конце этого лабе вы глубже поймете, как работать с цветами в JavaScript и как манипулировать значениями HSL для создания красивых цветовых схем.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") subgraph Lab Skills javascript/variables -.-> lab-28378{{"Преобразование HSL в RGB на JavaScript"}} javascript/data_types -.-> lab-28378{{"Преобразование HSL в RGB на JavaScript"}} javascript/arith_ops -.-> lab-28378{{"Преобразование HSL в RGB на JavaScript"}} javascript/comp_ops -.-> lab-28378{{"Преобразование HSL в RGB на JavaScript"}} end

Преобразование HSL в RGB с использованием JavaScript

Для преобразования кортежа цвета в формате HSL в RGB следуйте шагам:

  1. Откройте Терминал/SSH и введите node, чтобы начать практиковать программирование.
  2. Используйте формулу преобразования HSL в RGB, чтобы преобразовать кортеж цвета в соответствующий формат.
  3. Убедитесь, что входные параметры находятся в следующих диапазонах: H: [0, 360], S: [0, 100], L: [0, 100].
  4. Выходные значения должны быть в диапазоне [0, 255].

Вот JavaScript-код для формулы преобразования HSL в RGB:

const HSLToRGB = (h, s, l) => {
  s /= 100;
  l /= 100;
  const k = (n) => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = (n) =>
    l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [255 * f(0), 255 * f(8), 255 * f(4)];
};

Для использования функции укажите значения H, S и L в качестве аргументов:

HSLToRGB(13, 100, 11); // [56.1, 12.155, 0]

Резюме

Поздравляем! Вы завершили лабу по преобразованию HSL в RGB. Вы можете практиковать в более многих лабах в LabEx, чтобы улучшить свои навыки.