Color Conversion for Developers

PixelTool

Professional RGB/Hex Color Conversion for Developers

RGB to HEX Converter

R:

G:

B:

HEX to RGB Converter

HEX Code:

RGB Result

rgb(255, 128, 0)

CSS Usage:

.color-example {
  color: rgb(255, 128, 0);
}

HEX Result

#FF8000

CSS Usage:

.color-example {
  background-color: #FF8000;
}

Interactive Color Picker

Selected Color:

Color Information:

HEX: #FF8000

RGB: rgb(255, 128, 0)

HSL: hsl(30, 100%, 50%)

Developer Examples

React Component

const ColorBox = ({ color }) => (
  <div style={{
    backgroundColor: '{selectedColor}',
    padding: '1rem'
  }}>
    Color: {selectedColor}
  </div>
);

CSS Variables

:root {
  --primary-color: #{selectedColor};
  --primary-rgb: 255, 128, 0;
}

.button {
  background: rgba(var(--primary-rgb), 0.1);
  border: 2px solid var(--primary-color);
}

JavaScript Utility

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

© 2024 PixelTool. Professional color conversion tools for developers.

Perfect for CSS, JavaScript, React, and web development projects.