VPF::палитра цветов - Форум программистов

Рыжий

Дата 27.4.2005, 19:02 (ссылка)

(нет голосов)

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

Всем привет!
Мне вот интерестно как сделать палитру цветов, для того, чтобы человек мог любой выбрать цвет для себя.

Aliance

Дата 27.4.2005, 19:28 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Как вывод осуществлять? Вообще можно, взять массив (там номера rgb строк {16} от 0 до 255 по-моему... )

Вот пример вывода случайного RGB света:

Код


function colorize() {
 var r = Math.floor((Math.random() * 256)).toString(16);
 var g = Math.floor((Math.random() * 256)).toString(16);
 var b = Math.floor((Math.random() * 256)).toString(16);
 var colorstring = "#" + r + g + b;

 document.write("Цвет: " + colorstring);

 setTimeout('colorize()', 1000);
}

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 27.4.2005, 21:17 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Создаёшь картинку с "палитрой", генеришь в каком нибудь редакторе. Затем отслеживаешь клик по картинке, смотришь координаты, высчитываешь цвет.

Где конкретно проблема?

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Aliance

Дата 27.4.2005, 21:30 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Sardar думаю он имел ввиду автоматом сгенерить такую таблицу =)

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 27.4.2005, 22:23 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Это нечеловечески долго будет, к томуже завесить браузер может smile

Для тех кто не понял, в JS нельзя(пока) работать с картинками, рисовать, обращаться по пиксельно и т.п. Можно создать "картинку" где каждый пиксель это ячейка таблицы, либо тег span/div на абсолютной позиции, естественно что это всё начинает дико тормозить.

Потому не выделываемся, генерим картинку где угодно, сохраняем в .png и радуемся жизни smile

--------------------

Рыжий

Дата 28.4.2005, 00:06 (ссылка)

(нет голосов)

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

да нет картинку могу и я нарисовать а вот как уследить, допустим - человек водит мышкой по цветам и у него срузу выбивает этот цвет ну допустим в отдельном окошечке, когда происходит клик - это должно записаться в базу данных, как выбор цвета, загвоздка что в JS я не силен, хотя планирую (на каникулах - скоро) влезть в этот язык - а пока подскажите как реализовать отслеживание и запись места его клика...

Aliance

Дата 28.4.2005, 14:26 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

По координатам клика мыши. Это, к слову, можно не только на JS сделать. На том же php - если сделать не submit кнопку, а image...
Но давай уточним - тебе нужна картинки или нет? Т.к. в первом твоем посту о картинке речь не шла...
Объясни четко что ты хочешь сделать

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Alx

Дата 28.4.2005, 16:35 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

я вот делал с модальными окнами -
http://alx.com.ru/portfolio/scripts/javascript/greetings

там когда нажимаешь кнопки "текст" или "фон" открывается такая палитра.
генерируется она таким кодом:

Код


<script>
var parentWindow;
function setupData()
{txtColora.value = window.dialogArguments[0];
}
function sendData()
{var colora, dataRight = true;
colora = txtColora.value;
window.returnValue = [colora];
window.close();
}
function func(bg)
{txtColora.value=bg;
sendData();
}
var hexPairs = new Array("33","66","99","AA","CC","FF");
var str = '';
document.writeln('<body onLoad="setupData();"><table border="0">');
for (var i = 0; i < hexPairs.length; i++)
{document.writeln('<tr>');
for (var j = 0; j < hexPairs.length; j++)
{for (var k = 0; k < hexPairs.length; k++)
{str += '<td width="10" height="15" onmouseover="window.status=this.bgColor" onmouseout="window.status=\'\'" style="cursor:hand;" onclick="func(this.bgColor)" bgcolor="' + hexPairs[i]  + hexPairs[j] + hexPairs[k] + '"></td>';
}
document.writeln(str);
str = '';
}
document.writeln('</tr>');
} 
document.writeln('</table><input type=text name="txtColora" style="display:none;"></body>');
</script>

а функции, которые все это отрабатывают вот:

Код


var colora = "";
function sel_color()
{var varResult = window.showModalDialog ("color_panel.php", [colora], "dialogHeight:150px;dialogWidth:500px;help=no;status=yes;scroll=no;");
colora = varResult[0];

alert(colora);
}

таким образом после выбора цвета, окошко закроется, а в главном окне будет alert с выбранным цветом.

ie only.

--------------------

Ciber SLasH

Дата 28.4.2005, 21:39 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Цитата(PHP @ 27.4.2005, 20:02)

Вот посмотри пример палитры, если ты это имел ввиду...

Присоединённый файл ( Кол-во скачиваний: 56 )

Temp.zip

Sardar

Дата 28.4.2005, 23:11 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Ciber SLasH не плохо, только зачем дважды паковать? smile

PHP-Script отлавливаем на картинке событие onmousemove и onmouseup, в обработчике получаем координаты относительно верхнего левого угла((offset|layer)(X|Y)), по ним расчитываем цвет. Как ты генерил палитру, ту же формулу и используй. Где конкретно поблему?

Сгенери картинку, выложи, обьясни как генерил, напишем скрипт.

--------------------

Рыжий

Дата 29.4.2005, 00:21 (ссылка)

(нет голосов)

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

Ciber SLasH
у меня не качает файл smile

пишет мол я не авторизован, хотя все нормально должно быть smile

Ciber SLasH

Дата 29.4.2005, 00:30 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

2PHP-Script:
Вот код того примера:

Код


<html>
<head>
<title>BGColor Wizard</title>
<meta http-equiv=Content-Type content='text/html; charset=windows-1251'>
<meta NAME=Generator CONTENT='EditPlus 2.12'>
<meta NAME=Author CONTENT='Ciber SLasH'>
<script language='JavaScript'>
var HowTo = 'Клик грызуном по букве -- копирует цвет буквы в буфер обмена (к сожалению манипуляции с буфером обмена не поддерживаются в браузере Opera).\n\n' +
'Клик грызуном по образцу цвета -- блокирует изменение фона. Разблокирование изменения фона происходит по повторному клику в любой образец.'
var PL = new Array(216)

/*** Формирование HEX-значения из RGB-составляющих ***/
function MakeColor(r, g, b) {
  /** Преобразование числа (размером в байт) в строковое HEX-значение **/
  function hex(i) {
  var Result = ''
    if (i < 0) Result = "00"
    else if (i > 255) Result = "FF"
    else {
      // Преобразуем i в строковое HEX-значение и переводим все символы в вверхний регистр
      Result = i.toString(16).toUpperCase()
      if (Result.length < 2)
        Result = '0' + Result
    }
  return Result
  }
////////////////////////////////////////////////////////////////////////////////
  Ri = hex(r)
  Gi = hex(g)
  Bi = hex(b)
return Ri + Gi + Bi
}

i = 0

/*\ Формирование Web-палитры из 216 цветов \*/
for (r = 0; r < 6; r++) {
  for (g = 0; g < 3; g++) {
    for (b = 0; b < 6; b++) {
      PL[i] = MakeColor(0x33*r, 0x66*g, 0x33*b)
      i++
    }
  }
  for (g = 0; g < 3; g++) {
    for(b = 0; b < 6; b++) {
      PL[i] = MakeColor(0x33*r, 0x66*g + 0x33, 0x33*b)
      i++
    }
  }
}

/*** Формирование случайного числа из диапазона: [n, m] ***/
function Rand(n, m) {
  return Math.round(Math.random() * (m-n)) + n
}

/*** Создание таблицы с символами ***/
function CreateCharTable() {
////////////////////////////////////////////////////////////////////////////////
var ch = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЬЫЪЭЮЯабвгдеёжзийклмнопрстуфхцчшщьыъэюя0123456789!"#$%&\'()*+,-./:;<=>?@[\\]^`{|}~©®™§…'
g = r = 0
LenCh = ch.length
////////////////////////////////////////////////////////////////////////////////
  document.write('<td><table class=tChar cellspacing=0 border=0>')
  for (i = 0; i < 12; i++) {  // столбцы
    document.write('<tr>')
    for (j = 0; j < 18; j++) {  // строки
      // Каждые 3 столбца -- есть символы из соответствующего диапазона строки "ch"
      if (j <= 2) r = Rand(0, 25)  // большие англ. буквы
      else if ((j > 2) && (j <= 5)) r = Rand(26, 51)  // маленькие англ. буквы
      else if ((j > 5) && (j <= 8)) r = Rand(52, 84)  // большие рус. буквы
      else if ((j > 8) && (j <= 11)) r = Rand(85, 117)  // маленькие рус. буквы
      else if ((j > 11) && (j <= 14)) r = Rand(118, 127)  // цифры
      else if ((j > 14) && (j < 17)) r = Rand(128, LenCh-1)  // спец. символы
      document.write('<td id=char' + g + ' onMouseOver=Info(' + g + ') onClick=ToClipboard(inpCh)><b>' + ch.charAt(r) + '</b>')
      g++
    }
  }
  document.write('</table>')
  SetColor("char")
}

/*** Создание таблицы с образцами цвета ***/
function CreateColorTable() {
k = 0
  document.write('<td align=right><table class=tColor cellspacing=5 border=0>')
  for (i = 0; i < 12; i++) {  // столбцы
    document.write('<tr height=16>')
    for (j = 0; j < 18; j++) {  // строки
      document.write('<td id=color' + k + ' width=12 onMouseOver=SetBG(PL[' + k + ']) onClick=LockColor(this)>&nbsp;')
      k++
    }
}
  document.write('</table>')
  SetColor("color")
}

/*** Прописывание цвета символа либо образца цвета ***/
function SetColor(pr) {
  for (i = 0; i < 216; i++) {
    td_ID = pr + i  // формирование ID элем.: pr + i (<строка> + <номер>)
    td_Elem = document.getElementById(td_ID)
    if (pr == "color")
      td_Elem.bgColor = PL[i]  // устанавливаем элем. td_Elem цвет фона из палитры
    else if (pr == "char")
      td_Elem.style.color = PL[i]
  }
}

var lock = false  // признак "замарозки" перебирания цвета фона

/*** Установка цвета фона документа ***/
function SetBG(color) {
var inpBG
  if (!lock) {
    document.bgColor = color
    inpBG = document.getElementById("inpBG")
    inpBG.value = document.bgColor.toUpperCase()
  }
}

var oldValue = '#000000'

/*** Проверка правильности значения цвета для поля "Установить фон".
     И последующая установка (если значение верное) цвета фона ***/
function CheckIt(value) {
  if ((value.length == 7) && (value.charAt(0) == "#") && (value != oldValue)) {
    oldValue = value
    SetBG(value)
  }
}

/*** Копирование значения из INPUT-ов в буфер обмена ***/
function ToClipboard(value) {
var obj = value.createTextRange()  // текстовый диапазон
  if (obj) {
    obj.execCommand('Copy')  // выполняем команду "Копировать"
    alert('Значение скопировано в буфер обмена Windows.')
  }
  else
    alert('Ваш браузер не поддерживает операции с буфером обмена.')
return false
}

/*** Информация о цвете текущего символа ***/
function Info(id) {
var inpCh
  inpCh = document.getElementById("inpCh")
  inpCh.value = '#' + PL[id]
}

var tObj  // "замороженный" объект

/*** Остановка изменения фона ***/
function LockColor(obj) {
var Len, d
  if (!lock) {  // если объект не "заморожен"
    lock = !lock
    tObj = obj
    index = obj.bgColor  // цвет образца
    index = '0x' + index.substring(1, index.length)  // перевод цвета в 16-ричное значение
    index = 0xFFFFFF - index  // получаем инверсное значение цвета (теперь в index 10-ричное число)
    index = index.toString(16)  // переводим index в 16-ричное значение
    Len = index.length
    if (Len < 6) {  // если полученное 16-ричное значение состоит меньше, чем из 6-и знаков
      d = 6 - Len
      for (i = 1; i <= d; i++)  // добавляем слева нули, до получения длины в 6 знаокв
        index = '0' + index
    }
    obj.style.border = "2 inset #" + index  // устанавливаем рамку с инверсным цветом
  }
  else {
    lock = !lock
    tObj.style.border = "2 outset white"  // восстанавливаем рамку "по умолчанию"
  }
}
</script>
<style>
BODY {font-family: Helvetica}
p.hd {
    text-align: center;
    background: black;
    color: #87CEFA;
    padding: 10;
    border: 1 solid green
}
input {
    padding-left: 3;
    color: lime;
    background: black;
    border: 1 solid green
}
button {
    cursor: hand;
    color: lime;
    background: navy;
    border: 1 solid #6699FF
}
table.tColor td {border: 2 outset white; cursor: hand; font-size: 1}
table.tChar td {width: 20; cursor: hand; text-align: center}
</style>
</head>

<body bgcolor=#000000>
<p class=hd>
<b>BGColor Wizard-216 v.2.2.2</b> <a style=cursor:hand onClick=alert(HowTo)>&gt;&gt;(Info)&lt;&lt;</a>
<br><br>
<font color=magenta>Цвет текста: </font><input type=text id=inpCh size=7 value=#000000> <font color=yellow> Цвет фона: </font><input type=text id=inpBG size=7 value=#000000>&nbsp;<button onClick=ToClipboard(inpBG)>Copy</button>
</p>
<table width=100% cellspacing=5 border=0>
<tr>
    <script language='JavaScript'>
    CreateCharTable()
    CreateColorTable()
    </script>
</table>
<p class=hd><font color=yellow>Установить фон: </font><input type=text id=inpSetBG size=7 value=#000000 onKeyUp=CheckIt(this.value)>&nbsp;<button onClick=ToClipboard(inpSetBG)>Copy</button></p>
</body>
</html>

2Sardar:

Цитата

...только зачем дважды паковать?

А это потому что этот форум не захотел принимать RAR-архив, а если рар потом ещё и зазипить, то форум конечно проглатывает, а вот размер у такого двойного архива получается меньше, чем если бы мы запаковали только зипом (проверено путём экспериментов).

Это сообщение отредактировал(а) Ciber SLasH - 29.4.2005, 00:35

Рыжий

Дата 29.4.2005, 00:48 (ссылка)

(нет голосов)

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

вот посмотрите, картинка, которая должна получиться, у вас почти тоже самое, но здесь опрятней, и тем более отсортировано все по другому - синий с синим, зеленый с зеленым и т.д.

Присоединённый файл ( Кол-во скачиваний: 59 )

11.jpg

12345c

Дата 12.1.2006, 16:16 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Рыжий: а есть такая же, но в PNG, не попорченная Джпегом? Хотелось бы просчитать принцип её построения, но не гадать, какие цвета задумывались.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Sardar

Дата 13.1.2006, 02:30 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Это палитра цветов в HSV (оттенок, яркость, насыщеность). Для человека более удобно чем RGB. Инфа по ссылке.

--------------------

12345c

Дата 13.1.2006, 19:35 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Да, но красивых раскладок цветов я там не нашёл.

http://www.iosart.com/firefox/colorzilla/palettes.html - палитры, много, и даже коды цветов можно вытащить без проблем, а затем воспроизвести в JS.

http://www.ficml.org/jemimap/style/color/wheel.html - неплохой автомат для подбора цветов.

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

Alx

Дата 14.1.2006, 16:19 (ссылка)

(нет голосов)

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

Цитата(12345c @ 13.1.2006, 19:35

)

http://www.ficml.org/jemimap/style/color/wheel.html - неплохой автомат для подбора цветов.

--------------------

12345c

Дата 16.1.2006, 18:12 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Alx: конечно, красиво, и идея остроумная - взять один png и выводить сменяющиеся палитры. Раньше видел варианты, как брали jpg, увеличивали его маленький участок и показывали как пример выбранного цвета.

Про палитры:
Пока нет алгоритма генерации, написал брутфорсный генератор палитры по Gimp-овскому файлу палитр, который нашёл на вышеприведённой странице (ColorZilla palettes). Например, берём и выводим такой файл, только в виде таблицы:
user posted image

.
Для этого нужно скопировать описание в код страницы (занимает 12 Кба с комментариями) и выполнить маленький код:

Код

<!--http://cvs.gnome.org/viewcvs/*checkout*/gimp/data/palettes/Visibone.gpl-->
<script>d=document;
Columns=16;
/*GIMP Palette Name: Visibone Columns: 16
# Visibone -- GIMP Palette file
#  Arrangement idea from www.visibone.com
#  Conversion to GIMP Palette and addition of
#  hex codes and color names by Tigert <[email protected]>
# */
onload=function(){s=d.getElementById('ta1').value;
    a=s.match(/[ \t\n]\d+\b/g);    //для Gimp - 204 153  51 comment...(без цифр)\r\n
    j=0;s2='<table bgColor=black>';
    while(a[j]){ s2+='<tr>';
        for(i=0;i<Columns;i++)if(a[j])s2+='<td style=background-color:rgb('
            +a[j++].substring(1)+','+a[j++].substring(1)+','
            +a[j++].substring(1)+') width=4 height=5></td>';
    s2+='</tr>';}d.body.innerHTML+=s2+'</table>';
}
</script>
<body><br><br><br><br>
<textarea id=ta1 cols=70 rows=30 st yle=display:none>

255 255 255    #FFFFFF - White
204 204 204    #CCCCCC - Pale Gray
153 153 153    #999999 - Light Gray
102 102 102    #666666 - Dark Gray
 51  51  51    #333333 - Obscure Gray
  0   0   0    #000000 - Black
255 204   0    #FFCC00 - Yellow-Yellow-Orange
255 153   0    #FF9900 - Orange-Orange-Yellow
255 102   0    #FF6600 - Orange-Orange-Red
255  51   0    #FF3300 - Red-Red-Orange
  0   0   0    #000000 - Black
 51  51  51    #333333 - Obscure Gray
102 102 102    #666666 - Dark Gray
153 153 153    #999999 - Light Gray
204 204 204    #CCCCCC - Pale Gray
255 255 255    #FFFFFF - White
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 204  51    #FFCC33 - Light Yellow-Orange
255 204 102    #FFCC66 - Light Orange-Yellow
255 153 102    #FF9966 - Light Orange-Red
255 102  51    #FF6633 - Light Red-Orange
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
204 153   0    #CC9900 - Dark Yellow-Orange
204 153  51    #CC9933 - Medium Orange-Yellow
204 102  51    #CC6633 - Medium Orange-Red
204  51   0    #CC3300 - Dark Red-Orange
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
 51  51   0    #333300 - Obscure Weak Yellow
102 102   0    #666600 - Obscure Dull Yellow
153 153   0    #999900 - Dark Faded Yellow
204 204   0    #CCCC00 - Dark Hard Yellow
255 255   0    #FFFF00 - Yellow
153 102   0    #996600 - Dark Orange-Yellow
153  51   0    #993300 - Dark Orange-Red
 51   0   0    #330000 - Obscure Weak Red
102   0   0    #660000 - Obscure Dull Red
153   0   0    #990000 - Dark Faded Red
204   0   0    #CC0000 - Dark Hard Red
255   0   0    #FF0000 - Red
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
204 255   0    #CCFF00 - Yellow-Yellow-Spring
204 255  51    #CCFF33 - Light Yellow-Spring
153 204   0    #99CC00 - Dark Yellow-Spring
102 102  51    #666633 - Dark Weak Yellow
153 153  51    #999933 - Dark Dull Yellow
204 204  51    #CCCC33 - Medium Faded Yellow
255 255  51    #FFFF33 - Light Hard Yellow
102  51   0    #663300 - Obscure Dull Orange
  0   0   0    #000000 - Black
102  51  51    #663333 - Dark Weak Red
153  51  51    #993333 - Dark Dull Red
204  51  51    #CC3333 - Medium Faded Red
255  51  51    #FF3333 - Light Hard Red
204   0  51    #CC0033 - Dark Red-Pink
255  51 102    #FF3366 - Light Red-Pink
255   0  51    #FF0033 - Red-Red-Pink 
153 255   0    #99FF00 - Spring-Spring-Yellow
204 255 102    #CCFF66 - Light Spring-Yellow
153 204  51    #99CC33 - Medium Spring-Yellow
102 153   0    #669900 - Dark Spring-Yellow
153 153 102    #999966 - Medium Weak Yellow
204 204 102    #CCCC66 - Light Dull Yellow
255 255 102    #FFFF66 - Light Faded Yellow
153 102  51    #996633 - Dark Dull Orange
204 102   0    #CC6600 - Dark Hard Orange
153 102 102    #996666 - Medium Weak Red
204 102 102    #CC6666 - Light Dull Red
255 102 102    #FF6666 - Light Faded Red
153   0  51    #990033 - Dark Pink-Red
204  51 102    #CC3366 - Medium Pink-Red
255 102 153    #FF6699 - Light Pink-Red
255   0 102    #FF0066 - Pink-Pink-Red
102 255   0    #66FF00 - Spring-Spring-Green
153 255 102    #99FF66 - Light Spring-Green
102 204  51    #66CC33 - Medium Spring-Green
 51 153   0    #339900 - Dark Spring-Green
  0   0   0    #000000 - Black
204 204 153    #CCCC99 - Light Weak Yellow
255 255 153    #FFFF99 - Pale Dull Yellow
204 153 102    #CC9966 - Light Dull Orange
255 153  51    #FF9933 - Light Hard Orange
204 153 153    #CC9999 - Light Weak Red
255 153 153    #FF9999 - Pale Dull Red
  0   0   0    #000000 - Black
153   0 102    #990066 - Dark Pink-Magenta
204  51 153    #CC3399 - Medium Pink-Magenta
255 102 204    #FF66CC - Light Pink-Magenta
255   0 153    #FF0099 - Pink-Pink-Magenta
 51 255   0    #33FF00 - Green-Green-Spring
102 255  51    #66FF33 - Light Green-Spring
 51 204   0    #33CC00 - Dark Green-Spring
 51 102   0    #336600 - Obscure Dull Spring
102 204   0    #66CC00 - Dark Hard Spring
153 255  51    #99FF33 - Light Hard Spring
255 255 204    #FFFFCC - Pale Weak Yellow
255 204 153    #FFCC99 - Pale Dull Orange
  0   0   0    #000000 - Black
255 204 204    #FFCCCC - Pale Weak Red
204 102 153    #CC6699 - Light Dull Pink
153  51 102    #993366 - Dark Dull Pink
102   0  51    #660033 - Obscure Dull Pink
204   0 153    #CC0099 - Dark Magenta-Pink
255  51 204    #FF33CC - Light Magenta-Pink
255   0 204    #FF00CC - Magenta-Magenta-Pink
  0 255   0    #00FF00 - Green
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
102 153  51    #669933 - Dark Dull Spring
153 204 102    #99CC66 - Light Dull Spring
204 255 153    #CCFF99 - Pale Dull Spring
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 153 204    #FF99CC - Pale Dull Pink
255  51 153    #FF3399 - Light Hard Pink
204   0 102    #CC0066 - Dark Hard Pink
  0   0   0    #000000 - Black
102  51 102    #663366 - Dark Weak Magenta
 51   0  51    #330033 - Obscure Weak Magenta
  0 204   0    #00CC00 - Dark Hard Green
 51 255  51    #33FF33 - Light Hard Green
102 255 102    #66FF66 - Light Faded Green
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
204 153 204    #CC99CC - Light Weak Magenta
153 102 153    #996699 - Medium Weak Magenta
153  51 153    #993399 - Dark Dull Magenta
102   0 102    #660066 - Obscure Dull Magenta
  0 153   0    #009900 - Dark Faded Green
 51 204  51    #33CC33 - Medium Faded Green
102 204 102    #66CC66 - Light Dull Green
153 255 153    #99FF99 - Pale Dull Green
204 255 204    #CCFFCC - Pale Weak Green
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 204 255    #FFCCFF - Pale Weak Magenta
255 153 255    #FF99FF - Pale Dull Magenta
204 102 204    #CC66CC - Light Dull Magenta
204  51 204    #CC33CC - Medium Faded Magenta
153   0 153    #990099 - Dark Faded Magenta
  0 102   0    #006600 - Obscure Dull Green
 51 153  51    #339933 - Dark Dull Green
102 153 102    #669966 - Medium Weak Green
153 204 153    #99CC99 - Light Weak Green
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 102 255    #FF66FF - Light Faded Magenta
255  51 255    #FF33FF - Light Hard Magenta
204   0 204    #CC00CC - Dark Hard Magenta
  0  51   0    #003300 - Obscure Weak Green
 51 102  51    #336633 - Dark Weak Green
  0   0   0    #000000 - Black
  0 204 102    #00CC66 - Dark Hard Teal
 51 255 153    #33FF99 - Light Hard Teal
153 255 204    #99FFCC - Pale Dull Teal
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
204 153 255    #CC99FF - Pale Dull Violet
153 102 204    #9966CC - Light Dull Violet
102  51 153    #663399 - Dark Dull Violet
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255   0 255    #FF00FF - Magenta
  0 255  51    #00FF33 - Green-Green-Teal
 51 255 102    #33FF66 - Light Green-Teal
  0 204  51    #00CC33 - Dark Green-Teal
  0 102  51    #006633 - Obscure Dull Teal
 51 153 102    #339966 - Dark Dull Teal
102 204 153    #66CC99 - Light Dull Teal
204 255 255    #CCFFFF - Pale Weak Cyan
  0   0   0    #000000 - Black
153 204 255    #99CCFF - Pale Dull Azure
204 204 255    #CCCCFF - Pale Weak Blue
153  51 255    #9933FF - Light Hard Violet
102   0 204    #6600CC - Dark Hard Violet
 51   0 102    #330066 - Obscure Dull Violet
153   0 204    #9900CC - Dark Magenta-Violet
204  51 255    #CC33FF - Light Magenta-Violet
204   0 255    #CC00FF - Magenta-Magenta-Violet
  0 255 102    #00FF66 - Teal-Teal-Green
102 255 153    #66FF99 - Light Teal-Green
 51 204 102    #33CC66 - Medium Teal-Green
  0 153  51    #009933 - Dark Teal-Green
  0   0   0    #000000 - Black
153 255 255    #99FFFF - Pale Dull Cyan
153 204 204    #99CCCC - Light Weak Cyan
 51 153 255    #3399FF - Light Hard Azure
102 153 204    #6699CC - Light Dull Azure
153 153 255    #9999FF - Pale Dull Blue
153 153 204    #9999CC - Light Weak Blue
  0   0   0    #000000 - Black
102   0 153    #660099 - Dark Violet-Magenta
153  51 204    #9933CC - Medium Violet-Magenta
204 102 255    #CC66FF - Light Violet-Magenta
153   0 255    #9900FF - Violet-Violet-Magenta
  0 255 153    #00FF99 - Teal-Teal-Cyan
102 255 204    #66FFCC - Light Teal-Cyan
 51 204 153    #33CC99 - Medium Teal-Cyan
  0 153 102    #009966 - Dark Teal-Cyan
102 255 255    #66FFFF - Light Faded Cyan
102 204 204    #66CCCC - Light Dull Cyan
102 153 153    #669999 - Medium Weak Cyan
  0 102 204    #0066CC - Dark Hard Azure
 51 102 153    #336699 - Dark Dull Azure
102 102 255    #6666FF - Light Faded Blue
102 102 204    #6666CC - Light Dull Blue
102 102 153    #666699 - Medium Weak Blue
102   0 153    #660099 - Dark Violet-Magenta
153  51 204    #9933CC - Medium Violet-Magenta
204 102 255    #CC66FF - Light Violet-Magenta
153   0 255    #9900FF - Violet-Violet-Magenta
  0 255 204    #00FFCC - Cyan-Cyan-Teal
 51 255 204    #33FFCC - Light Cyan-Teal
  0 204 153    #00CC99 - Dark Cyan-Teal
 51 255 255    #33FFFF - Light Hard Cyan
 51 204 204    #33CCCC - Medium Faded Cyan
 51 153 153    #339999 - Dark Dull Cyan
 51 102 102    #336666 - Dark Weak Cyan
  0   0   0    #000000 - Black
  0  51 102    #003366 - Obscure Dull Azure
 51  51 255    #3333FF - Light Hard Blue
 51  51 204    #3333CC - Medium Faded Blue
 51  51 153    #333399 - Dark Dull Blue
 51  51 102    #333366 - Dark Weak Blue
 51   0 204    #3300CC - Dark Blue-Violet
102  51 255    #6633FF - Light Blue-Violet
 51   0 255    #3300FF - Blue-Blue-Violet
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0 255 255    #00FFFF - Cyan
  0 204 204    #00CCCC - Dark Hard Cyan
  0 153 153    #009999 - Dark Faded Cyan
  0 102 102    #006666 - Obscure Dull Cyan
  0  51  51    #003333 - Obscure Weak Cyan
  0 102 153    #006699 - Dark Azure-Cyan
  0  51 153    #003399 - Dark Azure-Blue
  0   0 255    #0000FF - Blue
  0   0 204    #0000CC - Dark Hard Blue
  0   0 153    #000099 - Dark Faded Blue
  0   0 102    #000066 - Obscure Dull Blue
  0   0  51    #000033 - Obscure Weak Blue
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0 153 204    #0099CC - Dark Cyan-Azure
 51 153 204    #3399CC - Medium Azure-Cyan
 51 102 204    #3366CC - Medium Azure-Blue
  0  51 204    #0033CC - Dark Blue-Azure
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
 51 204 255    #33CCFF - Light Cyan-Azure
102 204 255    #66CCFF - Light Azure-Cyan
102 153 255    #6699FF - Light Azure-Blue
 51 102 255    #3366FF - Light Blue-Azure
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
  0   0   0    #000000 - Black
255 255 255    #FFFFFF - White
204 204 204    #CCCCCC - Pale Gray
153 153 153    #999999 - Light Gray
102 102 102    #666666 - Dark Gray
 51  51  51    #333333 - Obscure Gray
  0   0   0    #000000 - Black
  0 204 255    #00CCFF - Cyan-Cyan-Azure
  0 153 255    #0099FF - Azure-Azure-Cyan
  0 102 255    #0066FF - Azure-Azure-Blue
  0  51 255    #0033FF - Blue-Blue-Azure
  0   0   0    #000000 - Black
 51  51  51    #333333 - Obscure Gray
102 102 102    #666666 - Dark Gray
153 153 153    #999999 - Light Gray
204 204 204    #CCCCCC - Pale Gray
255 255 255    #FFFFFF - White
</textarea>

Если задаться целью сделать компактную версию, берём для разнообразия примеров другую палитру, более компактную также по форме: user posted image

,
и пишем код для разбора 16-ричных чисел:

Код

<br><br><br><br><input type=button value=Генерировать: onClick=gen2('ta3')><br>
<script>d=document;
Columns=16;
gen2=function(p){s=d.getElementById(p).value;
    a=s.match(/#(\w{6})/ig);    //для hex-представлений- #CCCCCC,#999999,#666666,...
    j=0;s2='<table bgColor=black>';
    while(a[j]){
        s2+='<tr>';
        for(i=0;i<Columns;i++)if(a[j])s2+='<td'
            +' bgColor='+a[j++]+' style=font-size:4px width=4 height=5></td>';
        s2+='</tr>';
    }d.body.innerHTML+=s2+'</table>';
}</script>
<textarea id=ta3 cols=70 rows=20 st yle=display:none>
#FFFFFF,#CCCCCC,#999999,#666666,#333333,#000000,#FFCC00,#FF9900,#FF6600,#FF3300,#000000,#333333,#666666,#999999,#CCCCCC,#FFFFFF,
#99CC00,#000000,#000000,#000000,#000000,#CC9900,#FFCC33,#FFCC66,#FF9966,#FF6633,#CC3300,#000000,#000000,#000000,#000000,#CC0033,
#CCFF00,#CCFF33,#333300,#666600,#999900,#CCCC00,#FFFF00,#CC9933,#CC6633,#330000,#660000,#990000,#CC0000,#FF0000,#FF3366,#FF0033,
#99FF00,#CCFF66,#99CC33,#666633,#999933,#CCCC33,#FFFF33,#996600,#993300,#663333,#993333,#CC3333,#FF3333,#CC3366,#FF6699,#FF0066,
#66FF00,#99FF66,#66CC33,#669900,#999966,#CCCC66,#FFFF66,#996633,#663300,#996666,#CC6666,#FF6666,#990033,#CC3399,#FF66CC,#FF0099,
#33FF00,#66FF33,#339900,#66CC00,#99FF33,#CCCC99,#FFFF99,#CC9966,#CC6600,#CC9999,#FF9999,#FF3399,#CC0066,#990066,#FF33CC,#FF00CC,
#00CC00,#33CC00,#336600,#669933,#99CC66,#CCFF99,#FFFFCC,#FFCC99,#FF9933,#FFCCCC,#FF99CC,#CC6699,#993366,#660033,#CC0099,#330033,
#33CC33,#66CC66,#00FF00,#33FF33,#66FF66,#99FF99,#CCFFCC,#000000,#000000,#000000,#CC99CC,#996699,#993399,#990099,#663366,#660066,
#006600,#336633,#009900,#339933,#669966,#99CC99,#000000,#000000,#000000,#FFCCFF,#FF99FF,#FF66FF,#FF33FF,#FF00FF,#CC66CC,#CC33CC,
#003300,#00CC33,#006633,#339966,#66CC99,#99FFCC,#CCFFFF,#3399FF,#99CCFF,#CCCCFF,#CC99FF,#9966CC,#663399,#330066,#9900CC,#CC00CC,
#00FF33,#33FF66,#009933,#00CC66,#33FF99,#99FFFF,#99CCCC,#0066CC,#6699CC,#9999FF,#9999CC,#9933FF,#6600CC,#660099,#CC33FF,#CC00FF,
#00FF66,#66FF99,#33CC66,#009966,#66FFFF,#66CCCC,#669999,#003366,#336699,#6666FF,#6666CC,#666699,#330099,#9933CC,#CC66FF,#9900FF,
#00FF99,#66FFCC,#33CC99,#33FFFF,#33CCCC,#339999,#336666,#006699,#003399,#3333FF,#3333CC,#333399,#333366,#6633CC,#9966FF,#6600FF,
#00FFCC,#33FFCC,#00FFFF,#00CCCC,#009999,#006666,#003333,#3399CC,#3366CC,#0000FF,#0000CC,#000099,#000066,#000033,#6633FF,#3300FF,
#00CC99,#000000,#000000,#000000,#000000,#0099CA,#33CCFF,#66CCFF,#6699FF,#3366FF,#0033CC,#000000,#000000,#000000,#000000,#3300CC,
#FFFFFF,#CCCCCC,#999999,#666666,#333333,#000000,#00CCFF,#0099FF,#0066FF,#0033FF,#000000,#333333,#666666,#999999,#CCCCCC,#FFFFFF,
</textarea>

Весь он занимает 2.5 К, и ещё можно ужать за счёт ",#".
Остаётся задача - получить код для той хорошо расставленной палитры, и затем сделать генератор таблицы с ней не составит больших проблем. Кто видел в Gimp хорошие палитры?

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

alex77

Дата 4.10.2006, 13:49 (ссылка)

(нет голосов)

Загрузка ...

жывтоне чочо

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 29.9.2006
Где: Екатеринбург

Репутация: нет
Всего: нет

Добрый день!

Цитата(Рыжий @ 29.4.2005, 00:48

)

вот посмотрите, картинка, которая должна получиться, у вас почти тоже самое, но здесь опрятней, и тем более отсортировано все по другому - синий с синим, зеленый с зеленым и т.д.

Присоединённый файл ( Кол-во скачиваний: 20 )
Присоединённый файл 11.jpg

Как сгенерить такую картинку? Всмысле по какому принципу.

Это сообщение отредактировал(а) alex77 - 4.10.2006, 13:57

12345c

Дата 4.10.2006, 15:41 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Это здесь:
http://forum.vingrad.ru/index.php?showtopic=96019
http://js2.ru/subs/subs006.shtml - скрипты и примеры генерации палиты цветов (статья).
http://js2.ru/subs/subs005.shtml#part2 - начало статьи.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:49

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

alex77

Дата 5.10.2006, 07:09 (ссылка)

(нет голосов)

Загрузка ...

жывтоне чочо

Профиль
Группа: Участник
Сообщений: 52
Регистрация: 29.9.2006
Где: Екатеринбург

Репутация: нет
Всего: нет

Спасибо, много полезного, но той картинки, которая в цитируемом сообщении, я там не нашел.
Вот, нашел другую палитру (в прикрепл. файле), взял из photoshop.
Интересует принцип построения такой палитры. Может кто-нибудь знает, или делал?
Вариант с предварительным созданием списка цветов не подходит.

p.s. делаю форму для выбора цвета, наподобие той, что в FCKEditor, только с другими цветами.

Присоединённый файл ( Кол-во скачиваний: 18 )

palitra.png 7,26 Kb

Sardar

Дата 5.10.2006, 09:19 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

alex77, тебе лучше в алгоритмы с этим вопросом, потом уже просто реализовать в JS.

На вид похоже на HSL/HSV

--------------------

dstorm81

Дата 5.10.2006, 10:39 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

http://www.says-it.com/seal/index.php
тут тоже помотреть можно (пример)

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

12345c

Дата 5.10.2006, 13:17 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Цитата(alex77 @ 5.10.2006, 07:09

)

Интересует принцип построения такой палитры. Может кто-нибудь знает, или делал?
Вариант с предварительным созданием списка цветов не подходит.

Здесь таблица с очень многими ячейками получится, по опыту известно, что при генерации такой, IE будет сильно тормозить (на десятки секунд).
Попробуй угадать или прочитать граббером способ кодирования, затем написать алгоритм. Я делал подобное, в статье http://js2.ru/subs/subs006.shtml - пример, в конце статьи. Но времени на кодирование генерации уходит очень много, а выигрыш - 300 байтов.
Для показанной палитры выигрыш, конечно, будет больше, так как цветов больше, но вопрос встанет со скоростью. Попробуйте нарисовать эту палитру без цветов или с 1 и тем же цветом, чтобы посмотреть скорость. (Вряд ли устроит.)

Другой способ работы с палитрой - по рисунку без генерации таблицы. Который подойдёт для такого очень многоцветного рисунка. По клику мыши получаем координаты клика и вычисляем цвет. По списку или по формуле - неважно. Формула будет привязана к рисунку.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:53

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »