Создание CSS-градиента после изображения

Question

Я создаю палитру цветов, которая использует CSS-градиенты вместо изображений.У меня есть CSS-градиент, который работает для выбора цвета HSB, но я не могу создать CSS-градиент для выбора цвета HSB.Вы можете увидеть исходный градиент на: http://jsfiddle.net/qVsFN/

Градиент 1 должен выглядеть как градиент 2. Возможно ли это сделать только с помощью css?Я безуспешно пробовал несколько вещей, включая радиальные градиенты.

Вот CSS и разметка, которую я использую:

#red_grad {
    background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 0, 0, 1)) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left center, right center, from(rgba(255, 255, 255, 1)), to(rgba(255, 0, 0, 1)));
    height: 262px;
    width: 262px;
}
#black_grad {
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1), transparent) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, center bottom, center top, from(rgba(0, 0, 0, 1)), to(transparent)) repeat scroll 0 0 transparent;
    height: 262px;
    width: 262px;
}

<div id="red_grad">
    <div id="black_grad">
    </div>
</div>

Вы можете увидеть это в прямом эфире на http://jsfiddle.net/qVsFN/

Answer 1

Плоскость HSL Saturation-Lightness может быть выполнена с 2 линейными градиентами:

1. Lightness: от белого до прозрачного до черного (горизонтальный градиент)
2. Насыщенность: полностью насыщенный цвет досерый (# 808080) (вертикальный градиент)

Вот скрипка с ним: http://jsfiddle.net/leaverou/qVsFN/3/

Примечания:

• Что вы ошиблисьПервое, что вас смутило, это то, что вы думали, что ограничены только двумя цветовыми остановками на градиент.Как вы видите, они более гибкие, чем это:)
• Почему 4 градиента цвета вместо 3 для градиента легкости?Потому что прозрачность на самом деле отображается в rgba (0,0,0,0), поэтому градиент от прозрачного к белому не то, что вы ожидаете.
• Вам не нужно 2 элемента в CSS3, вы можете иметь несколько фонов в одном изображении, поэтому я удалил дополнительный элемент.;)

А как насчет изменения оттенка?Просто замените red полностью насыщенной версией нового цвета (Hue = что угодно, sat = 100, lightness = 50) - и вот ваш выбор цвета!