Категории

• Главная
• 1С
• 2040
• CG
• IOT умный дом
• Joomla
• Linux
• macOS
• Windows
• Безопасность
• Железо
• Защита данных
• Простотак
• Сети LAN
• Создание сайтов
• Электрика

Цветовая палитра HEX, RGB и CMYK на javascript и css для сайта

24.12.2025 | коды из категории: Создание сайтов

javascript палитра цветов для сайта иногда актуально если создаете сайт, типо дизайнерский. Чтобы пользователь мог прям на сайте выбрать звет и отправить через форму обратной связи, или при заказе товара. Скрипт преобразует цвет в виде HEX, RGB и CMYK

css

 .palette {
    max-width: 500px;
    margin: 0 auto;
    background: #1e1e1e;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 1px solid #333;
  }
  .preview {
    width: 100%;
    height: 100px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #444;
    background: #000; /* чёрный фон, чтобы даже тёмные цвета были видны */
  }
  .sliders {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .slider-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .slider-group label {
    width: 50px;
    font-weight: bold;
    color: #ffffff;
  }
  input[type="range"] {
    flex: 1;
    accent-color: #4a90e2; /* цвет ползунка в современных браузерах */
  }
  .output {
    margin-top: 20px;
    padding: 12px;
    background: #2a2a2a;
    border-radius: 6px;
    font-family: monospace;
    color: #ffffff;
    border: 1px solid #444;
  }

java script

  const rInput = document.getElementById('r');
  const gInput = document.getElementById('g');
  const bInput = document.getElementById('b');
  const preview = document.getElementById('colorPreview');
  const hexOut = document.getElementById('hex');
  const rgbOut = document.getElementById('rgb');
  const cmykOut = document.getElementById('cmyk');

  function rgbToHex(r, g, b) {
    return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('').toUpperCase();
  }

  function rgbToCmyk(r, g, b) {
    let r1 = r / 255;
    let g1 = g / 255;
    let b1 = b / 255;
    let k = 1 - Math.max(r1, g1, b1);
    if (k === 1) return [0, 0, 0, 100]; // черный
    let c = Math.round(((1 - r1 - k) / (1 - k)) * 100);
    let m = Math.round(((1 - g1 - k) / (1 - k)) * 100);
    let y = Math.round(((1 - b1 - k) / (1 - k)) * 100);
    k = Math.round(k * 100);
    return [c, m, y, k];
  }

  function updateColor() {
    const r = parseInt(rInput.value);
    const g = parseInt(gInput.value);
    const b = parseInt(bInput.value);

    const hex = rgbToHex(r, g, b);
    const rgb = `rgb(${r}, ${g}, ${b})`;
    const [c, m, y, k] = rgbToCmyk(r, g, b);
    const cmyk = `cmyk(${c}%, ${m}%, ${y}%, ${k}%)`;

    preview.style.backgroundColor = hex;
    hexOut.textContent = hex;
    rgbOut.textContent = rgb;
    cmykOut.textContent = cmyk;
  }

  rInput.addEventListener('input', updateColor);
  gInput.addEventListener('input', updateColor);
  bInput.addEventListener('input', updateColor);

  // Инициализация
  updateColor();

html

<div class="palette">
  <div class="preview" id="colorPreview"></div>

  <div class="sliders">
    <div class="slider-group">
      <label>R:</label>
      <input type="range" id="r" min="0" max="255" value="255">
    </div>
    <div class="slider-group">
      <label>G:</label>
      <input type="range" id="g" min="0" max="255" value="255">
    </div>
    <div class="slider-group">
      <label>B:</label>
      <input type="range" id="b" min="0" max="255" value="255">
    </div>
  </div>

  <div class="output">
    <div><strong>HEX:</strong> <span id="hex">#FFFFFF</span></div>
    <div><strong>RGB:</strong> <span id="rgb">rgb(255, 255, 255)</span></div>
    <div><strong>CMYK:</strong> <span id="cmyk">cmyk(0%, 0%, 0%, 0%)</span></div>
  </div>
</div>

← Назад к списку

---