Один из самых эффективных модулей обработки цвета на JavaScript.

Особенности:

• Адаптивный стиль. Преобразование форматов цвета с помощью модуля ichiColor можно выполнить, задав свойства:

var color= IchiColor("#f2a2a2")

color.r = 30
color.hex //"#1ea2a2"

color.rgb = "rgb(255, 0, 0)"
color.r // 255

Такой способ работы, основанный на присваивании значений, не только проще и нагляднее по сравнению с использованием методов get и set, но и позволяет более легко интегрировать модуль с фреймворками, основанными на данных (например, Vue.js или AngularJS), используя минимум кода для создания элементов управления цветом:

// html
<span>RGB</span><input v-model="ichiColor.rgb" type="text">
<span>Hex</span><input v-model="ichiColor.hex" type="text">


<script>
var vueApp = new Vue({
    el: 'body',
    data: {
        ichiColor: new IchiColor(),
    },
})
</script>

Онлайн-пример — jsfiddle.

• Полная поддержка функций. Модуль ichiColor поддерживает практически все распространённые форматы цветов и позволяет легко комбинировать значения цветов в желаемом формате. Модуль поддерживает преобразование между следующими форматами цветов: — rgb; — hsl; — hsv (hsb); — hwb; — hex (шестнадцатеричное значение цвета); — int (десятичное целое значение цвета); — rgba (текст CSS формата RGBA); — ahex (argb, шестнадцатеричное значение цвета с альфа-каналом).

Расширение функций Помимо основных функций, модуль ichiColor также может выполнять более сложные преобразования между моделями цветов: — hsl255 (стиль выбора цвета Microsoft Office); — hsl240 (стиль выбора цвета Windows); — labPs (D50 белый, стиль Photoshop); — lab (белый D65); — xyz; — xyY; — LCHab; — luv; — theLuma_Rec709 (только для чтения, яркость стандарта Rec709); — theLuma_WCAG (только для чтения, яркость стандарта Rec709); — theWavelength (только для чтения, длина волны спектра); — getWCAGcontrastThan() (вычисление контрастности цветов по стандарту Web без препятствий). Для использования расширенных функций достаточно включить дополнительный файл JavaScript, подробности см. ниже.

• Расширенные функции не включены в тестирование покрытия кода.

Производительность Модуль ichiColor демонстрирует отличную производительность, особенно в сценариях, где требуется непрерывное получение и присвоение значений, а также преобразование в различные форматы.

Стратегия Дизайн модуля ichiColor оптимизирован для использования в элементах выбора цвета, и каждое присвоение значения экземпляру ichiColor сначала вычисляет и сохраняет основные атрибуты (RGB, INT, HEX). Вторичные атрибуты (HSL, HSV, HWB и т. д.) рассчитываются только при необходимости: если экземпляр уже получал значения вторичных атрибутов, они будут рассчитываться при каждом присвоении значения, в противном случае расчёт будет производиться только при получении значения. Полученные значения сохраняются, что делает последующие операции получения значений очень эффективными.

• Расширенные функции не оптимизированы и всегда рассчитывают значения при их получении.

Установка

Модуль ichiColor поддерживается как в браузерах, так и в среде Node.js и не имеет зависимостей (расширенные функции используют библиотеку ColorRNA, которая уже включена в файл ichi-color-extension.js).

Если вы используете менеджер пакетов npm или yarn:

yarn add ichi-color

npm i ichi-color

Или вручную добавьте файлы:

<script type="text/javascript" src="ichi-color.js"></script>

Клонируйте или загрузите ichiColor. Использование

• import:

  • Если вы используете пакетный менеджер, то можете напрямую использовать ES6-модули:

    import IchiColor from "ichi-color";
  • Если же вы вручную скопировали файл, то используйте:

    import IchiColor from "./src/ichi-color.js";

• require: Если вы используете Node.js и require, то:

  var IchiColor = require("ichi-color");

API

Экземпляр IchiColor представляет собой цвет. При создании экземпляра можно опустить new:

var color1 = new IchiColor("#FF0022");
var color2 = IchiColor("#FF0022") // Можно опустить new;

var color3 = IchiColor({r: 7, g: 58, b: 95});
var color4 = IchiColor({h: 205, s: 87, l: 20});
var color5 = IchiColor([255,211,22]); //[r,g,b]
var color6 = IchiColor(16711714); //10-ричное значение цвета
...

Свойства экземпляра позволяют получить и установить различные цветовые данные:

color1.r      //255
color1.g      //0
color1.b      //34
color1.hex    //"#ff0022"
color1.int    //16711714 (10-ричное значение)
color1.rgba   //"rgba(255, 0, 34, 1)"
color1.alpha  //1 (непрозрачность rgba)
color1.ahex  //"#ffff0022" (argb 16-ричный)
color1.argb  //"#ffff0022" (совпадает с ahex)


color1.hsl.h  //352
color1.hsl.s  //100
color1.hsl.l  //50

color1.hsv.h  //352
color1.hsv.s  //100
color1.hsv.v  //100

color1.hwb.h  //352
color1.hwb.w  //0
color1.hwb.b  //0

Можно изменять свойства для установки цвета:

color1.r        //255
color1.g        //0
color1.b        //34
color1.hex      //"#ff0022"

color1.r = 100  
color1.hex      //"#640022"

color1.hex = "#32a3f1"
color1.r        //50 
color1.g        //163
color1.b        //241

color1.hsl.l = 20
color1.r        //7
color1.g        //58
color1.b        //95
...

Также можно использовать метод set() экземпляра, который принимает те же параметры, что и при создании экземпляра:

 color1.set("#ff0022");
 color1.set({h: 205, s: 93, v: 37});
 color1.set(16711714);  //(10-ричное значение) 
 

Кроме свойств экземпляра, у экземпляров есть методы, которые возвращают объекты с информацией о цвете:

color1.getRGB()           //{r: 7, g: 58, b: 95}
color1.getRedGrainBlue()  //{red: 7, grain: 58, blue: 95}
color1.getRedGreenBlue()  //{red: 7, green: 58, blue: 95 };
color1.getHSL()           //{h: 205, s: 87, l: 20}
color1.getHSV()           //{h: 205, s: 93, v: 37}
color1.getHWB()           //{h: 205, w: 3, b: 63}

Эти форматы объектов можно использовать для создания экземпляров цветов:

var color4 = IchiColor({red: 7, grain: 58, blue: 95})

Есть два метода для создания копий экземпляров:

var newColor1 = color1.getClone();  // Создаёт копию экземпляра цвета
newColor1.hex   //"#073a5f"

var newColor2 = color1.getInvertColor();  //Создаёт инвертированный экземпляр цвета
newColor2.hex   //"#f8c5a0"

Расширение Некоторые дополнительные функции доступны через расширение. Расширение — это функция, которая обрабатывает модуль ichiColor. Чтобы добавить расширение к ichiColor, выполните следующие действия:

import IchiColor_base from "./ichi-color.js";
import IchiColorEx from "./ichi-color-extension.js";

var IchiColor = IchiColorEx(IchiColor_base); //Добавляет расширение

При использовании в браузере через загрузку файлов:

var IchiColor = expandIchiColor(IchiColor );

После этого новый возвращаемый экземпляр IchiColor будет иметь свойство ichiColor.ex, которое содержит расширенные функции.

Расширенные функции включают:

• ichiColor.ex.hsl255 (стиль выбора цвета в Microsoft Office)
• ichiColor.ex.hsl240 (стиль выбора цвета Windows)
• ichiColor.ex.labPs (D50 белый, стиль Photoshop)
• ichiColor.ex.lab (белый D65)
• ichiColor.ex.xyz
• ichiColor.ex.xyY
• ichiColor.ex.LCHab
• ichiColor.ex.luv
• ichiColor.ex.theLuma_Rec709 (только для чтения, стандарт яркости Rec709)
• ichiColor.ex.theLuma_WCAG (только для чтения, стандарт Web безбарьерной яркости)
• ichiColor.ex.theWavelength (только для чтения, длина волны спектра)
• ichiColor.ex.getWCAGcontrastThan( ichiColor ) (вычисляет контрастность цвета по сравнению с другими цветами в соответствии со стандартом Web безбарьерного цвета)

Расширенные функции используют мою другую библиотеку ColorRNA.js, которая специализируется на научных вычислениях цвета, и не были специально оптимизированы. Использование расширения может замедлить вычисление цвета, но вы можете временно отключить расширение, установив атрибут экземпляра ichiColor.__ex_enable в false.

Сборка Если вы изменили исходный код в папке ./scr, вы можете использовать следующую команду для сборки проекта и генерации файлов в папке ./bin:

npm run build

Этот проект использует rollup.js для сборки.

Кроме того, этот проект имеет демонстрацию, построенную с использованием webpack1:

npm run demo

Вы можете создать отчёт после тестирования, выполнив:

npm run report

Отчёт будет создан в папке coverage.

• Кроме того, файлы с производительностью тестов находятся в каталоге demo.

Тестирование В этом проекте используется AVA для тестирования:

npm run test

Чтобы создать отчёт, выполните:

npm run report

Отчёт создаётся в папке покрытия. Изначально планировалось назвать проект oneColor, но это название уже было занято, поэтому пришлось выбрать имя ichiColor.

License

MIT