ColorSlurp Logo ColorSlurp

Color Formats

ColorSlurp lets you copy colors to many major formats out of the box, and even create custom formats to copy as.

Copying colors

To copy a color, click on the copy icon in the editing controls, then choose a format to copy too.

Copy button

When in the main editor view, or the contrast tab, you can copy colors to your default color format using the shortcut +1 or +C

Pasting/Importing colors into ColorSlurp

One of the powerful features of ColorSlurp is its ability to import any color from your clipboard, in any color format it supports. In other words, you can copy any color--a hex string, RGB string, NS Color, etc., then, just hit paste in any active ColorSlurp window and the color will be transferred in, ready for editing.

You can paste colors into ColorSlurp by using the shortcut V or by going to Edit > Import Color Format Clipboard.

You can also paste any color into the hex input. Try it out!

Default and preferred formats

You can choose a format you would like colors to be copied as by default in ColorSlurp's preferences. You can also set two more preferred formats which will show up at the top of the copy menu with shortcuts to copy as.

Preferred color format preferences

Custom formats

ColorSlurp lets you create custom formats for any of your needs.

To create and edit custom formats, head over to ColorSlurp's format preferences. At the bottom, you'll see all your custom formats, and a button to create a new format

Custom color format preferences

Format editor

The format editor is where you create custom formats. At the top is the name field where you set the format's name. The next field is the template field, this is where you define your custom format with template variables. At the bottom is the preview where you can see what the template will look like rendered.

Custom color format editor

Template variables

Custom color formats are created using ColorSlurp's template variables. Each variable stars with a %[ and ends with a ]. In the middle, is the color value you would like to display.

For example, if you add the hex value tag (%[hex]) to your template like so:

Color('%[hex]')

Then when you copy a color, it will output like this:

Color('#56E834')

Here's a list of the avaible color variables you can put in your template:

RGB

  • %[rgb.r] - Red component in decimal 0 to 1
  • %[rgb.g] - Green component in decimal 0 to 1
  • %[rgb.b] - Blue component in decimal 0 to 1
  • %[rgb.r255] - Red component from 0 to 255
  • %[rgb.g255] - Green component from 0 to 255
  • %[rgb.b255] - Blue component from 0 to 255

HSB

  • %[hsb.h] - Hue component in decimal 0 to 1
  • %[hsb.s] - Saturation component in decimal 0 to 1
  • %[hsb.b] - Brightness component in decimal 0 to 1
  • %[hsb.h360] - Hue component from 0 to 360
  • %[hsb.s100] - Saturation component from 0 to 100
  • %[hsb.b100] - Brightness component from 0 to 100

HSL

  • %[hsl.h] - Hue component in decimal 0 to 1
  • %[hsl.s] - Saturation component in decimal 0 to 1
  • %[hsl.l] - Lightness component in decimal 0 to 1
  • %[hsl.h360] - Hue component from 0 to 360
  • %[hsl.s100] - Saturation component from 0 to 100
  • %[hsl.l100] - Lightness component from 0 to 100

CMYK

  • %[cmyk.c] - Cyan component in decimal 0 to 1
  • %[cmyk.m] - Magenta component in decimal 0 to 1
  • %[cmyk.y] - Yellow component in decimal 0 to 1
  • %[cmyk.k] - Key (black) component in decimal 0 to 1
  • %[cmyk.c100] - Cyan component from 0 to 100
  • %[cmyk.m100] - Magenta component from 0 to 100
  • %[cmyk.y100] - Yellow component from 0 to 100
  • %[cmyk.k100] - Key (black) component from 0 to 100

HEX

  • %[hex] Hex value formated according to the ColorSlurp hex preferences
  • %[hex.raw] Raw lowercase hex value (24a360)
  • %[hexa] Hex value with alpha formated according to the ColorSlurp hex preferences
  • %[hexa.raw] Raw lowercase hex value with alpha (24a360aa)

Alpha

  • %[alpha] Alpha component (opacity) decimal 0 to 1
  • %[alpha.100] Alpha component (opacity) number 0 to 100
  • %[alpha.255] Alpha component (opacity) number 0 to 255
Hologram Desktop App Icon Check out our app Hologram Desktop!