# settings.py

COLORPICKER_COLORS = [
    'b4da35',
    '37af68',
    '64cf00',
    'cfcc00',
    'fdb735',
]

# customfields.py

from django import forms
from django.conf import settings
from django.db import models
from django.template.loader import render_to_string

class ColorWidget(forms.Widget):

    def render(self, name, value, attrs=None):
        colors = settings.COLORPICKER_COLORS
        return render_to_string("color_widget.html", locals())

class ColorField(models.CharField):
    def __init__(self, *args, **kwargs):
        kwargs['max_length'] = 10
        super(ColorField, self).__init__(*args, **kwargs)

    def formfield(self, **kwargs):
        kwargs['widget'] = ColorWidget
        return super(ColorField, self).formfield(**kwargs)

# templates/color_widget.html

<style>
    .colorpicked {
        border: 2px solid black;
    }
    span.colorpicker {
        white-space: nowrap;
        cursor: pointer;
    }
    span.colorpicker span {
        padding: 5px;
    }
</style>
<span id="colorpicker{{ attrs.id }}" class='colorpicker'>
    {% for color in colors %}
        <span data-color='{{ color }}' style="background-color: #{{ color }};" class="{% if color = value %}colorpicked{% endif %}">{{ color }}</span>
    {% endfor %}
</span>
<input type="hidden" name="{{ name }}" value="{{ value }}" id="{{ attrs.id }}"/>

<script>
    $(document).ready(function() {
        $('#colorpicker{{ attrs.id }} span').bind('click', function() {
            $('#{{ attrs.id }}').val(($(this).attr('data-color')));
            $('#colorpicker{{ attrs.id }} span').removeClass('colorpicked');
            $(this).addClass('colorpicked');
        });
    });
</script>