A palette mixin.

_palette.scss

@import "compass";
@import "compass/css3";
@import "compass/css3/images";

$base-color-transparent: transparent;
$base-color-white: rgb(255,255,255);
$base-color-black: rgb(0,0,0);
$custom-color-kia-red: rgb(196,23,44);
$custom-color-kia-text-gray: rgb(88,88,88);
$custom-color-kia-light-gray: rgb(162,162,162);
$custom-color-kia-light-gray-2: rgb(164,164,164);
$custom-color-kia-lighter-gray: rgb(230,230,230);
$custom-color-kia-medium-gray: rgb(136,136,136);
$custom-color-kia-grayer: rgb(153,153,153);
$custom-color-kia-grayer-2: rgb(103,102,102);
$custom-color-kia-grayer-3: rgb(120,120,121);
$custom-color-kia-grayer-4: rgb(171,171,171);
$custom-color-kia-dark-gray: rgb(68,68,68);
$custom-color-kia-darker-gray: rgb(47,47,47);
$custom-color-kia-silver: rgb(204,204,204);
$custom-color-kia-blue: rgb(68,140,203);
$custom-color-kia-gold: rgb(142,110,77);
$custom-color-kia-green: rgb(123,182,9);
$border-color-gray: rgb(54,54,54);
$border-color-darker-gray: rgb(189,189,189);
$border-color-darker-gray-2: rgb(196,196,196);

$color-list-bg:
  	$base-color-transparent			/* [11X] */
	$base-color-white			/* [12X] */
	$base-color-black			/* [13X] */
	$custom-color-kia-red			/* [14X] */
	$custom-color-kia-dark-gray		/* [15X] */
	$custom-color-kia-medium-gray		/* [16X] */
	$custom-color-kia-lighter-gray		/* [17X] */
	$custom-color-kia-darker-gray   	/* [18X] */
	$custom-color-kia-green   		/* [19X] */
	$custom-color-kia-blue			/* [20X] */
	$custom-color-kia-grayer-4		/* [21X] */
;

$color-list-fg:
	$base-color-white			/* [XX1] */
	$base-color-black			/* [XX2] */
	$custom-color-kia-red			/* [XX3] */
	$custom-color-kia-text-gray		/* [XX4] */
	$custom-color-kia-darker-gray		/* [XX5] */
	$custom-color-kia-green			/* [XX6] */
	$custom-color-kia-light-gray-2		/* [XX7] */
	$custom-color-kia-medium-gray		/* [XX8] */
	$custom-color-kia-dark-gray		/* [XX9] */
	$custom-color-kia-blue			/* [XX10] */
	$custom-color-kia-grayer		/* [XX11] */
	$custom-color-kia-grayer-2		/* [XX12] */
	$custom-color-kia-silver		/* [XX13] */
	$custom-color-kia-grayer-3		/* [XX14] */
	$custom-color-kia-grayer-4		/* [XX15] */
;

.kia-palette-121{
	background-color: $base-color-white !important;
}

/* This is temporary until SASS merges the string manipulation methods */
$sprite-hex-list-fg:
	'ffffff'
	'000000'
	'c4172c'
	'585858'
	'2f2f2f'
	'7bb609'
	'a4a4a4'
	'888888'
	'444444'
	'448ccb'
	'999999'
	'676666'
	'cccccc'
	'787879'
	'ababab'
;

$sprite-icon-list:
	'arrow-left'
	'arrow-right'
	'close-x'
	'findme'
	'gallery'
	'glass'
	'refresh'
	'share'
	'check'
;

@for $index-bg from 1 through length($color-list-bg) {
	$bg-color: nth($color-list-bg, $index-bg);
	@for $index-fg from 1 through length($color-list-fg) {
		$fg-color: nth($color-list-fg, $index-fg);
		@if $fg-color != $bg-color {
			.kia-palette-1#{$index-bg}#{$index-fg} {
				color: $fg-color;
				border-color: $fg-color;
				background-color: $bg-color;
			}
		}
	}
}

@for $index-fg from 1 through length($color-list-fg) {
	$fg-color: nth($color-list-fg, $index-fg);

	@for $index-icon from 1 through length($sprite-icon-list) {
		$icon-name: nth($sprite-icon-list, $index-icon);
		.kia-icon-#{$index-fg}-#{$icon-name} {
			@extend .icons-#{nth($sprite-hex-list-fg, $index-fg)}-#{$icon-name} !optional;
			display: inline-block;
		}
	}
}

/*  background color for vehicles */
// soul 2013
.kia-palette-311 {
	// color: $base-color-white;
	// border-color: rgb(93,93,93);
	// background-color: #fff;
	background-color: #cdda98;
	//@include filter-gradient(#470202, rgba(3,180,132,0.1), vertical); // IE6-9
	//@include background-image(linear-gradient(top, rgba(71,2,2,1) 0%,rgba(73,2,2,1) 1%,rgba(103,5,5,1) 15%,rgba(134,14,8,0.99) 27%,rgba(145,21,9,0.99) 32%,rgba(158,29,10,0.96) 38%,rgba(159,30,9,0.95) 40%,rgba(164,36,9,0.94) 43%,rgba(182,56,10,0.86) 53%,rgba(192,74,9,0.8) 61%,rgba(194,85,8,0.71) 66%,rgba(194,87,8,0.69) 67%,rgba(189,101,6,0.39) 76%,rgba(185,113,4,0.19) 84%,rgba(185,114,4,0.17) 85%,rgba(183,121,3,0.06) 91%,rgba(180,132,1,0.01) 100%));
	//background: url('../img/palette/kia-palette-311.png') #fff 0 0 repeat-x;
}

.kia-palette-312 {
	background-color: #cdda98;
	//@include filter-gradient(#470202, rgba(3,180,132,0.1), vertical); // IE6-9
	//@include background-image(linear-gradient(top, rgba(71,2,2,1) 0%,rgba(73,2,2,1) 1%,rgba(103,5,5,1) 15%,rgba(134,14,8,0.99) 27%,rgba(145,21,9,0.99) 32%,rgba(158,29,10,0.96) 38%,rgba(159,30,9,0.95) 40%,rgba(164,36,9,0.94) 43%,rgba(182,56,10,0.86) 53%,rgba(192,74,9,0.8) 61%,rgba(194,85,8,0.71) 66%,rgba(194,87,8,0.69) 67%,rgba(189,101,6,0.39) 76%,rgba(185,113,4,0.19) 84%,rgba(185,114,4,0.17) 85%,rgba(183,121,3,0.06) 91%,rgba(180,132,1,0.01) 100%));
	background: url('../img/palette/kia-palette-312.png') #fff 0 0 repeat-x;
}

// soul
.kia-palette-313 {
	background-color: #cdda98;
}

/* color chips in 400 series */
/* exterior color */
.kia-palette-411 {
	color: $custom-color-kia-dark-gray;
	border-color: #510407;
	background-color: #cf3f40;
}

/* interior color */
.kia-palette-421 {
	color: $custom-color-kia-dark-gray;
	border-color: #000;
	background-color: #585858;	
}

.kia-palette-211{
	color: $base-color-white;
	background-color: $custom-color-kia-silver;	
}