Color Utilities

Convey meaning through color with a handful of color utility classes.

Colors

How to use:

import { colors } from 'real-react`
...
<div style={{color: colors.darkRed}} />

Note: click on color name or color value to copy to clipboard.

	Color Name	Color Value
	kellerRed	#ce011f
	kelleBlue	#3ec5d3
	darkBlue	#01707b
	blue	#0099a7
	blue80	#33adb9
	blue60	#66c2ca
	blue40	#99d6dc
	blue20	#ccebed
	blue10	#e5f4f6
	darkRed	#ce011f
	red	#ee0033
	red80	#f1335c
	red60	#f56685
	red40	#f899ad
	red20	#fcccd6
	red10	#fde5ea
	darkCoral	#fa3720
	coral	#fc6a59
	coral80	#fd887a
	coral60	#fda69b
	coral40	#fec3bd
	coral20	#fee1de
	coral10	#fef0ee
	darkOrange	#ec7618
	orange	#ee9146
	orange80	#f1a76b
	orange60	#f5bd90
	orange40	#f8d3b5
	orange20	#fce9da
	orange10	#fdf4ec
	darkGold	#f3be04
	gold	#ffce24
	gold80	#ffd850
	gold60	#ffe27c
	gold40	#ffeba7
	gold20	#fff5d3
	gold10	#fffae9
	darkGreen	#00c392
	green	#00dda6
	green80	#33e4b8
	green60	#66ebca
	green40	#99f1db
	green20	#ccf8ed
	green10	#e5fbf6
	darkPurple	#6662ce
	purple	#7774cf
	purple80	#9290d9
	purple60	#adace2
	purple40	#c9c7ec
	purple20	#e4e3f5
	purple10	#f1f1fa
	black	#000000
	neutral01	#373f51
	neutral02	#5f6574
	neutral03	#737885
	neutral04	#878c97
	neutral05	#afb2b9
	neutral06	#cacfd3
	neutral07	#d7d9dc
	neutral08	#f5f5f6
	neutral09	#fafafa
	white	#ffffff

<State initial={{ value: '' }}>
  {({ state, setState }) => {
    const copyToClipboard = value => {
      if (navigator.clipboard) {
        navigator.clipboard
          .writeText(value)
          .then(clippedText => console.log(clippedText))
        setState({
          snack: {
            id: guid(),
            message: `Successfully copied '${value}'!`,
            type: 'info',
          },
        })
      } else {
        setState({
          snack: {
            id: guid(),
            message: `Copy to Clipboard API is not supported in your browser`,
            type: 'error',
          },
        })
      }
    }
    return (
      <div className="d-flex flex-column align-items-center justify-content-center">
        <TextInput
          name="text-input"
          onChange={(name, value) => setState({ value })}
          placeholder="Search for color"
          value={state.value}
          style={{ width: '50%' }}
          autoFocus
        />
        <table className="color-section mt-3">
          <tbody>
            <tr>
              <th />
              <th>Color Name</th>
              <th>Color Value</th>
            </tr>
            {Object.entries(colors).map((entry, i) => {
              const [colorName, colorValue] = entry
              // __filemeta is injected by docz
              if (colorName === '__filemeta') return null
              return (
                (state.value === '' ||
                  includes(toLower(colorName), toLower(state.value)) ||
                  includes(toLower(colorValue), toLower(state.value))) && (
                  <tr key={colorName}>
                    <td className="d-flex justify-content-center align-items-center mt-1">
                      <ProgressBar square shadow progressColor={colorValue} />
                    </td>
                    <td onClick={() => copyToClipboard(colorName)}>
                      <div className="d-flex align-items-center justify-content-end pr-3">
                        <Icon
                          className="mr-3"
                          icon="copy-to-clipboard"
                          size="small"
                        />
                        <BodyText className="mb-0">{colorName}</BodyText>
                      </div>
                    </td>
                    <td onClick={() => copyToClipboard(colorValue)}>
                      <div className="d-flex align-items-center pl-3">
                        <BodyText className="mb-0">{colorValue}</BodyText>
                        <Icon
                          className="ml-3"
                          icon="copy-to-clipboard"
                          size="small"
                        />
                      </div>
                    </td>
                  </tr>
                )
              )
            })}
          </tbody>
        </table>
        <Snackbar
          snack={state.snack}
          onDismiss={snackId => {
            setState({ snack: null })
          }}
        />
      </div>
    )
  }}
</State><State initial={{ value: '' }}>
  {({ state, setState }) => {
    const copyToClipboard = value => {
      if (navigator.clipboard) {
        navigator.clipboard
          .writeText(value)
          .then(clippedText => console.log(clippedText))
        setState({
          snack: {
            id: guid(),
            message: `Successfully copied '${value}'!`,
            type: 'info',
          },
        })
      } else {
        setState({
          snack: {
            id: guid(),
            message: `Copy to Clipboard API is not supported in your browser`,
            type: 'error',
          },
        })
      }
    }
    return (
      <div className="d-flex flex-column align-items-center justify-content-center">
        <TextInput
          name="text-input"
          onChange={(name, value) => setState({ value })}
          placeholder="Search for color"
          value={state.value}
          style={{ width: '50%' }}
          autoFocus
        />
        <table className="color-section mt-3">
          <tbody>
            <tr>
              <th />
              <th>Color Name</th>
              <th>Color Value</th>
            </tr>
            {Object.entries(colors).map((entry, i) => {
              const [colorName, colorValue] = entry
              // __filemeta is injected by docz
              if (colorName === '__filemeta') return null
              return (
                (state.value === '' ||
                  includes(toLower(colorName), toLower(state.value)) ||
                  includes(toLower(colorValue), toLower(state.value))) && (
                  <tr key={colorName}>
                    <td className="d-flex justify-content-center align-items-center mt-1">
                      <ProgressBar square shadow progressColor={colorValue} />
                    </td>
                    <td onClick={() => copyToClipboard(colorName)}>
                      <div className="d-flex align-items-center justify-content-end pr-3">
                        <Icon
                          className="mr-3"
                          icon="copy-to-clipboard"
                          size="small"
                        />
                        <BodyText className="mb-0">{colorName}</BodyText>
                      </div>
                    </td>
                    <td onClick={() => copyToClipboard(colorValue)}>
                      <div className="d-flex align-items-center pl-3">
                        <BodyText className="mb-0">{colorValue}</BodyText>
                        <Icon
                          className="ml-3"
                          icon="copy-to-clipboard"
                          size="small"
                        />
                      </div>
                    </td>
                  </tr>
                )
              )
            })}
          </tbody>
        </table>
        <Snackbar
          snack={state.snack}
          onDismiss={snackId => {
            setState({ snack: null })
          }}
        />
      </div>
    )
  }}
</State>

Text Color

Blue

Coral

Gold

Green

Orange

Purple

Red

White

<BodyText className="text-blue">Blue</BodyText>
<BodyText className="text-coral">Coral</BodyText>
<BodyText className="text-gold">Gold</BodyText>
<BodyText className="text-green">Green</BodyText>
<BodyText className="text-orange">Orange</BodyText>
<BodyText className="text-purple">Purple</BodyText>
<BodyText className="text-red">Red</BodyText>
<BodyText className="text-white">White</BodyText><BodyText className="text-blue">Blue</BodyText>
<BodyText className="text-coral">Coral</BodyText>
<BodyText className="text-gold">Gold</BodyText>
<BodyText className="text-green">Green</BodyText>
<BodyText className="text-orange">Orange</BodyText>
<BodyText className="text-purple">Purple</BodyText>
<BodyText className="text-red">Red</BodyText>
<BodyText className="text-white">White</BodyText>

Text Color on Hover

Blue

Coral

Gold

Green

Orange

Purple

Red

White

<BodyText className="text-hover-blue">Blue</BodyText>
<BodyText className="text-hover-coral">Coral</BodyText>
<BodyText className="text-hover-gold">Gold</BodyText>
<BodyText className="text-hover-green">Green</BodyText>
<BodyText className="text-hover-orange">Orange</BodyText>
<BodyText className="text-hover-purple">Purple</BodyText>
<BodyText className="text-hover-red">Red</BodyText>
<BodyText className="text-hover-white">White</BodyText><BodyText className="text-hover-blue">Blue</BodyText>
<BodyText className="text-hover-coral">Coral</BodyText>
<BodyText className="text-hover-gold">Gold</BodyText>
<BodyText className="text-hover-green">Green</BodyText>
<BodyText className="text-hover-orange">Orange</BodyText>
<BodyText className="text-hover-purple">Purple</BodyText>
<BodyText className="text-hover-red">Red</BodyText>
<BodyText className="text-hover-white">White</BodyText>

Background Colors

Blue

Coral

Gold

Green

Orange

Purple

Red

White

<BodyText className="text-white bg-blue">Blue</BodyText>
<BodyText className="text-white bg-coral">Coral</BodyText>
<BodyText className="text-white bg-gold">Gold</BodyText>
<BodyText className="text-white bg-green">Green</BodyText>
<BodyText className="text-white bg-orange">Orange</BodyText>
<BodyText className="text-white bg-purple">Purple</BodyText>
<BodyText className="text-white bg-red">Red</BodyText>
<BodyText className="bg-white">White</BodyText><BodyText className="text-white bg-blue">Blue</BodyText>
<BodyText className="text-white bg-coral">Coral</BodyText>
<BodyText className="text-white bg-gold">Gold</BodyText>
<BodyText className="text-white bg-green">Green</BodyText>
<BodyText className="text-white bg-orange">Orange</BodyText>
<BodyText className="text-white bg-purple">Purple</BodyText>
<BodyText className="text-white bg-red">Red</BodyText>
<BodyText className="bg-white">White</BodyText>

Color Utilities

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}.css-1vg6q84{font-weight:700;}Colors

Text Color

Text Color on Hover

Background Colors

Colors