diff --git a/app/imports/api/properties/Attributes.js b/app/imports/api/properties/Attributes.js
index 8bc3a9c8..5c83a660 100644
--- a/app/imports/api/properties/Attributes.js
+++ b/app/imports/api/properties/Attributes.js
@@ -47,6 +47,18 @@ let AttributeSchema = createPropertySchema({
   spellSlotLevel: {
     type: 'fieldToCompute',
 		optional: true,
+  },
+  // For type healthBar midColor, and lowColor can be set separately from the
+  // property's color, which is used as the undamaged color
+  'healthBarColorMid': {
+		type: String,
+		regEx: /^#([a-f0-9]{3}){1,2}\b$/i,
+		optional: true,
+  },
+  'healthBarColorLow': {
+		type: String,
+		regEx: /^#([a-f0-9]{3}){1,2}\b$/i,
+		optional: true,
   },
 	// The starting value, before effects
 	baseValue: {
diff --git a/app/imports/ui/components/ColorPicker.vue b/app/imports/ui/components/ColorPicker.vue
index 143f2b66..bb1115f6 100644
--- a/app/imports/ui/components/ColorPicker.vue
+++ b/app/imports/ui/components/ColorPicker.vue
@@ -13,7 +13,10 @@
         v-on="on"
       >
         {{ label }}
-        <v-icon :right="!!label">
+        <v-icon
+          :right="!!label"
+          :color="label && value"
+        >
           mdi-format-paint
         </v-icon>
       </v-btn>
diff --git a/app/imports/ui/properties/components/attributes/HealthBar.vue b/app/imports/ui/properties/components/attributes/HealthBar.vue
index a220c9e4..f71f8d89 100644
--- a/app/imports/ui/properties/components/attributes/HealthBar.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBar.vue
@@ -3,9 +3,9 @@
     wrap
     align-center
     justify-center
-    style="min-height: 48px;"
+    style="min-height: 42px;"
     :class="{ hover }"
-    class="my-3 health-bar"
+    class="my-1 health-bar"
     :data-id="_id"
   >
     <div
@@ -18,37 +18,55 @@
     </div>
     <v-flex
       style="
-        height: 20px;
+        height: 24px;
         flex-basis: 300px;
         flex-grow: 100;
       "
     >
-      <v-layout
+      <div
         column
         align-center
         style="cursor: pointer;"
         class="bar"
         @click="edit"
       >
-        <v-progress-linear
-          :value="(value / maxValue) * 100"
-          height="20"
-          color="green lighten-1"
-          class="ma-0"
-        />
-        <span
-          class="value"
-          style="
-            margin-top: -20px;
-            z-index: 1;
-            font-size: 15px;
-            font-weight: 600;
-            height: 20px;
-          "
+        <div
+          style="height: 24px; width: 100%; position: relative; transition: background-color 0.5s ease;"
+          :style="{
+            backgroundColor: barBackgroundColor
+          }"
         >
-          {{ value }} / {{ maxValue }}
-        </span>
-      </v-layout>
+          <div
+            class="filler"
+            style="height: 100%; transform-origin: left; transition: all 0.5s ease;"
+            :style="{
+              backgroundColor: barColor,
+              transform: `scaleX(${value / maxValue})`,
+            }"
+          />
+          <div
+            class="value"
+            :class="{
+              'white--text': isTextLight,
+              'black--text': !isTextLight,
+            }"
+            style="
+              font-size: 15px;
+              line-height: 24px;
+              font-weight: 600;
+              position: absolute;
+              left: 0;
+              top: 0;
+              right: 0;
+              bottom: 0;
+              text-align: center;
+
+            "
+          >
+            {{ value }} / {{ maxValue }}
+          </div>
+        </div>
+      </div>
       <transition name="transition">
         <increment-menu
           v-show="editing"
@@ -71,14 +89,38 @@
 
 <script lang="js">
 import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
+import isDarkColor from '/imports/ui/utility/isDarkColor.js';
+import chroma from 'chroma-js';
+
 	export default {
     components: {
       IncrementMenu
+    },
+    inject: {
+      theme: {
+        default: {
+          isDark: false,
+        },
+      },
     },
 		props: {
 			value: Number,
 			maxValue: Number,
 			name: String,
+      color: {
+        type: String,
+        default() {
+          return this.$vuetify.theme.currentTheme.primary
+        },
+      },
+      midColor: {
+        type: String,
+        default: undefined,
+      },
+      lowColor: {
+        type: String,
+        default: undefined,
+      },
 			_id: String,
 		},
 		data() {
@@ -87,6 +129,37 @@ import IncrementMenu from '/imports/ui/components/IncrementMenu.vue';
 				hover: false,
 			};
 		},
+    computed: {
+      barColor() {
+        const fraction = this.value / this.maxValue;
+        if (!Number.isFinite(fraction)) return this.color;
+        if (fraction > 0.5){
+          return this.color;
+        } else if (this.midColor && this.lowColor) {
+          return chroma.mix(this.lowColor, this.midColor, fraction * 2).hex();
+        } else if (this.midColor){
+          return this.midColor;
+        }
+        return this.color;
+      },
+      barBackgroundColor(){
+        return chroma(this.barColor)
+        .darken(1.5)
+        .desaturate(1.5)
+        .hex();
+      },
+      isTextLight(){
+        return isDarkColor(this.barBackgroundColor);
+        /* Change color at the halfway mark
+        const fraction = this.value / this.maxValue;
+        if (fraction >= 0.5){
+          return isDarkColor(this.barColor);
+        } else {
+          return isDarkColor(this.barBackgroundColor);
+        }
+        */
+      }
+    },
 		methods: {
 			edit() {
 				this.editing = true;
diff --git a/app/imports/ui/properties/components/attributes/HealthBarCard.vue b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
index 496aa7e7..f05c7978 100644
--- a/app/imports/ui/properties/components/attributes/HealthBarCard.vue
+++ b/app/imports/ui/properties/components/attributes/HealthBarCard.vue
@@ -6,6 +6,9 @@
       :value="attribute.value"
       :max-value="attribute.total"
       :name="attribute.name"
+      :color="attribute.color"
+      :mid-color="attribute.healthBarColorMid"
+      :low-color="attribute.healthBarColorLow"
       :_id="attribute._id"
       @change="e => $emit('change', {_id: attribute._id, change: e})"
       @click="e => $emit('click', {_id: attribute._id})"
diff --git a/app/imports/ui/properties/forms/AttributeForm.vue b/app/imports/ui/properties/forms/AttributeForm.vue
index e933eaf4..5d23e2bf 100644
--- a/app/imports/ui/properties/forms/AttributeForm.vue
+++ b/app/imports/ui/properties/forms/AttributeForm.vue
@@ -47,23 +47,25 @@
       :hint="attributeTypeHints[model.attributeType]"
       @change="change('attributeType', ...arguments)"
     />
-    <smart-select
-      v-if="model.attributeType === 'hitDice'"
-      label="Hit Dice Size"
-      :items="['d4', 'd6', 'd8', 'd10', 'd12', 'd20']"
-      :value="model.hitDiceSize"
-      :error-messages="errors.hitDiceSize"
-      :menu-props="{auto: true, lazy: true}"
-      @change="change('hitDiceSize', ...arguments)"
-    />
-    <computed-field
-      v-if="model.attributeType === 'spellSlot'"
-      label="Spell slot level"
-      :model="model.spellSlotLevel"
-      :error-messages="errors.spellSlotLevel"
-      @change="({path, value, ack}) =>
-        $emit('change', {path: ['spellSlotLevel', ...path], value, ack})"
-    />
+    <v-expand-transition>
+      <smart-select
+        v-if="model.attributeType === 'hitDice'"
+        label="Hit Dice Size"
+        :items="['d4', 'd6', 'd8', 'd10', 'd12', 'd20']"
+        :value="model.hitDiceSize"
+        :error-messages="errors.hitDiceSize"
+        :menu-props="{auto: true, lazy: true}"
+        @change="change('hitDiceSize', ...arguments)"
+      />
+      <computed-field
+        v-if="model.attributeType === 'spellSlot'"
+        label="Spell slot level"
+        :model="model.spellSlotLevel"
+        :error-messages="errors.spellSlotLevel"
+        @change="({path, value, ack}) =>
+          $emit('change', {path: ['spellSlotLevel', ...path], value, ack})"
+      />
+    </v-expand-transition>
     <inline-computation-field
       label="Description"
       :model="model.description"
@@ -71,70 +73,94 @@
       @change="({path, value, ack}) =>
         $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <form-section
-      name="Advanced"
-      standalone
-    >
-      <smart-combobox
-        label="Tags"
-        multiple
-        chips
-        deletable-chips
-        hint="Used to let slots find this property in a library, should otherwise be left blank"
-        :value="model.tags"
-        @change="change('tags', ...arguments)"
-      />
-      <div class="layout column align-center">
-        <smart-switch
-          v-if="model.attributeType !== 'hitDice'"
-          label="Allow decimal values"
-          class="no-flex"
-          :value="model.decimal"
-          :error-messages="errors.decimal"
-          @change="change('decimal', ...arguments)"
-        />
-        <div
-          class="layout justify-center"
-          style="align-self: stretch;"
+    <form-sections>
+      <v-expand-transition>
+        <form-section
+          v-if="model.attributeType === 'healthBar'"
+          name="Health Bar Settings"
+          standalone
         >
-          <text-field
-            label="Damage"
-            type="number"
-            class="damage-field text-center"
-            style="max-width: 300px;"
-            hint="The attribute's final value is reduced by this amount. Attribute damage can increase this value until it matches the attribute's computed value. Should mostly be left blank."
-            :disabled="!context.isLibraryForm"
-            :value="model.damage"
-            :error-messages="errors.damage"
-            @change="change('damage', ...arguments)"
+          <color-picker
+            :value="model.healthBarColorMid"
+            label="Half-filled color"
+            @input="value => $emit('change', {path: ['healthBarColorMid'], value})"
+          />
+          <color-picker
+            :value="model.healthBarColorLow"
+            label="Empty color"
+            @input="value => $emit('change', {path: ['healthBarColorLow'], value})"
+          />
+        </form-section>
+      </v-expand-transition>
+
+      <form-section
+        name="Advanced"
+      >
+        <smart-combobox
+          label="Tags"
+          multiple
+          chips
+          deletable-chips
+          hint="Used to let slots find this property in a library, should otherwise be left blank"
+          :value="model.tags"
+          @change="change('tags', ...arguments)"
+        />
+        <div class="layout column align-center">
+          <smart-switch
+            v-if="model.attributeType !== 'hitDice'"
+            label="Allow decimal values"
+            class="no-flex"
+            :value="model.decimal"
+            :error-messages="errors.decimal"
+            @change="change('decimal', ...arguments)"
+          />
+          <div
+            class="layout justify-center"
+            style="align-self: stretch;"
+          >
+            <text-field
+              label="Damage"
+              type="number"
+              class="damage-field text-center"
+              style="max-width: 300px;"
+              hint="The attribute's final value is reduced by this amount. Attribute damage can increase this value until it matches the attribute's computed value. Should mostly be left blank."
+              :disabled="!context.isLibraryForm"
+              :value="model.damage"
+              :error-messages="errors.damage"
+              @change="change('damage', ...arguments)"
+            />
+          </div>
+        </div>
+        <div class="layout wrap">
+          <smart-select
+            v-if="model.attributeType !== 'hitDice'"
+            label="Reset"
+            clearable
+            style="flex-basis: 300px;"
+            hint="When damage should be reset to zero"
+            :items="resetOptions"
+            :value="model.reset"
+            :error-messages="errors.reset"
+            :menu-props="{auto: true, lazy: true}"
+            @change="change('reset', ...arguments)"
           />
         </div>
-      </div>
-      <div class="layout wrap">
-        <smart-select
-          v-if="model.attributeType !== 'hitDice'"
-          label="Reset"
-          clearable
-          style="flex-basis: 300px;"
-          hint="When damage should be reset to zero"
-          :items="resetOptions"
-          :value="model.reset"
-          :error-messages="errors.reset"
-          :menu-props="{auto: true, lazy: true}"
-          @change="change('reset', ...arguments)"
-        />
-      </div>
-    </form-section>
+      </form-section>
+    </form-sections>
   </div>
 </template>
 
 <script lang="js">
-	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+  import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+	import FormSections from '/imports/ui/properties/forms/shared/FormSections.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+  import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 
 	export default {
 		components: {
 			FormSection,
+      FormSections,
+      ColorPicker,
 		},
     mixins: [propertyFormMixin],
     inject: {
diff --git a/app/package-lock.json b/app/package-lock.json
index 0a2567fe..90de0f9d 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -508,6 +508,11 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
     },
+    "chroma-js": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chroma-js/-/chroma-js-2.4.2.tgz",
+      "integrity": "sha512-U9eDw6+wt7V8z5NncY2jJfZa+hUH8XEj8FQHgFJTrUFnJfXYf4Ml4adI2vXZOjqRDpFWtYVWypDfZwnJ+HIR4A=="
+    },
     "cliui": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@@ -2783,7 +2788,7 @@
     },
     "signal-exit": {
       "version": "3.0.2",
-      "resolved": false,
+      "resolved": "",
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
     "simpl-schema": {
diff --git a/app/package.json b/app/package.json
index 5d745db7..79f6de12 100644
--- a/app/package.json
+++ b/app/package.json
@@ -23,6 +23,7 @@
     "animejs": "^2.2.0",
     "aws-sdk": "^2.1059.0",
     "bcrypt": "^5.0.0",
+    "chroma-js": "^2.4.2",
     "core-js": "^2.6.11",
     "css-box-shadow": "^1.0.0-3",
     "date-fns": "^1.30.1",