device-cmyk() у CSS — колір у моделі CMYK для друку

Опис

Експериментальна технологія: Перед використанням уважно перевірте таблицю сумісності з браузерами.

Функція device-cmyk() в CSS є спеціалізованою і здебільшого використовується в області друку. Вона дозволяє точно керувати кольорами для певних принтерів, використовуючи CMYK-кольорову модель. Ця функція забезпечує дизайнерам можливість експериментувати з конкретними комбінаціями фарб для досягнення бажаного кольору на друкованих матеріалах.

device-cmyk() призначена для ситуацій, коли дизайнер повинен контролювати кінцевий вигляд кольору на папері. Проте слід зауважити, що результат на екрані може відрізнятися від надрукованого, оскільки процесори CSS можуть лише наблизити кольори.

Синтаксис функції device-cmyk() приймає чотири параметри:

• C, M, Y, та K, що представляють відповідно значення ціану, мадженти, жовтого та чорного компонентів CMYK-кольору.
• Кожне з цих значень може бути числом або відсотком.
• Опціонально, може бути вказаний параметр / A, який визначає альфа-канал для прозорості кольору.

Приклад:

p {
  color: device-cmyk(0 81% 81% 30%);
}

У цьому прикладі ми визначаємо колір тексту для параграфів, використовуючи CMYK-значення. Це може бути корисно для точного відображення кольору у виготовленні друкованих матеріалів. Функція device-cmyk() забезпечує глибший контроль над кольорами і взаємодією з конкретним обладнанням, що робить її незамінним інструментом у випадках, коли точність кольору є критично важливою.

правити

Загальний опис

правити

Порада

Використовуйте функцію device-cmyk() для вираження кольорів CMYK в способі, залежному від пристрою, якщо ви створюєте матеріали для виводу на певний принтер з відомими комбінаціями фарб.

автор: Bond правити

Порада

Зверніть увагу, що результат кольору може відрізнятися від надрукованого результату через різні методи перетворення кольору від CMYK до RGB.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

device-cmyk(C M Y K[ / A][, color]);

Функція device-cmyk може отримувати 3 значень:

C, M, Y, K

Числові або відсоткові значення, що вказують компоненти ціану, мадженти, жовтого та чорного для CMYK-кольору.

автор: Bond

правити

A

Значення альфа-каналу, де число 1 відповідає 100% (повна непрозорість).

автор: Bond

правити

color

Додатковий параметр, що вказує резервний колір (fallback color), який буде використаний, якщо браузер користувача не знає, як перетворити CMYK-колір у RGB.

автор: Bond

правити

Переглядачі

Переглядачів ще не додано.

Приклади

+ запропонувати свій приклад у пісочниці

<div class="cols">
    <div class="card c1">
        <h4>лише device-cmyk()</h4>
        <p>Колір заданий одним оголошенням <code>color: device-cmyk(0 81% 81% 30%)</code>.
            Текст лишився чорним: браузер відкинув оголошення й узяв успадковане
            значення.</p>
    </div>
    <div class="card c2">
        <h4>із запасним кольором</h4>
        <p>Тут перед тим самим оголошенням стоїть <code>color: #b23a3a</code>.
            Воно вижило — і саме воно тут працює. Так страхують будь-яку
            колірну функцію, якої може не бути.</p>
    </div>
    <div class="card c3">
        <h4>те, що працює вже зараз</h4>
        <p>Заголовок пофарбовано <code>lab(50% 40 30)</code>, а цей абзац —
            <code>color(display-p3 0 0.5 0.3)</code>. Обидві функції браузер
            розуміє, і жодного запасного варіанта тут не знадобилося.</p>
    </div>
</div>

<h4 class="cap">А для друку працює зовсім інше</h4>
<div class="print-note">
    <p>Кольори для паперу задають не в css, а у файлі, що йде в друк. У css
        лишається медіа-запит <code>@media print</code>: у ньому тло прибирають,
        текст зводять до чорного, а посилання розкривають адресою. Це не дає
        точності фарб — зате дає передбачуваний аркуш.</p>
</div>

.cols {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.card {
    flex: 1 1 260px;
    max-width: 300px;
    padding: 4px 14px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.card h4 {
    margin: 14px 0 8px;
    font-size: .95rem;
}

/* 1: оголошення, якого браузер не розуміє — воно просто зникає */
.c1 {
    color: device-cmyk(0 81% 81% 30%);
}

/* 2: запасне оголошення СТОЇТЬ ПЕРЕД тим, що може не спрацювати */
.c2 {
    color: #b23a3a;
    color: device-cmyk(0 81% 81% 30%);
}

/* 3: колірні функції, які працюють сьогодні */
.c3 h4 {
    color: lab(50% 40 30);
}

.c3 p {
    color: color(display-p3 0 0.5 0.3);
}

.print-note {
    max-width: 560px;
    margin-top: 6px;
    padding: 2px 14px;
    border-left: 4px solid #d1a04a;
    background: #fffaf0;
}

@media print {
    .card {
        border: 1px solid #000;
        background: none;
        color: #000;
    }
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}